React 测试：将 Enzyme 的 find() 输出存储在变量中以实现 DRYness

Question

我正在使用 Jest 和 Enzyme 来测试 React 组件。有时我发现自己使用 find() 一遍又一遍地输入相同的内容，因此我尝试按如下方式整理我的代码：

重复代码

component.setProps({ something: 'hello' });
expect(component.find('SomeField').prop('disabled')).toBe(false);

component.setProps({ something: 'good' });
expect(component.find('SomeField').prop('disabled')).toBe(true);

component.setProps({ something: 'abc' });
expect(component.find('SomeField').prop('disabled')).toBe(false);

尝试 DRY

const someField = component.find('SomeField');

component.setProps({ something: 'hello' });
expect(someField.prop('disabled')).toBe(false);

component.setProps({ something: 'good' });
expect(someField.prop('disabled')).toBe(true);

component.setProps({ something: 'abc' });
expect(someField.prop('disabled')).toBe(false);

鉴于：

component = shallow(<MyComponent />);

但是这种方法行不通。有人可以解释为什么吗？此外，如果可能的话，如果有人可以建议一种干燥方法，那就太好了。

Answer 1

问题是：setProps 会发生什么？这与浏览器中的 React 组件中发生的情况相同，每次 props 更改时，都会调用 render 函数。使用 const someField = component.find('SomeField'); 可以存储渲染的子组件之一，但在此之后调用 setProps 将强制组件渲染新的子组件。所以存储的不是你的组件改变的那个。

我建议只保留非干燥功能，因为它会使测试尽可能简单。

React 测试：将 Enzyme 的 find() 输出存储在变量中以实现 DRYness

React Testing: Storing Enzyme's find() output in a variable for DRYness

jestjs

enzyme