如何使用 Jest & Enzyme 在 React 中编写 useEffect Hook 的测试用例？

Question

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';

const InputComponent = ({ item, data }) => {
const [value, setValue] = useState('');
// Binding values for Edit based on unique Key
useEffect(() => {
if (data && data[item.field] && data[item.field] !== 'undefined') {
setValue(data[item.field]);
}
}, [data,item.field]);
//On change setting state
const setState = e => {
setValue(e.target.value);
};
return (
<div className='Input-Containter' data-test='InputBox-tbl-evt'>
<input
data-test='input-ele'
type='text'
value={value}
onChange={e => setState(e)}
/>
</div>
);
};
InputComponent.propTypes = {
item: PropTypes.object,
data: PropTypes.object
};
InputComponent.defaultProps = {
data: {
id: '1',
name: 'd'
},
item:{
field: 'id',
}
};
export default InputComponent;

有人可以帮我如何在使用效果中测试 setValue((

-> 更新了此组件的完整代码

->组件将获取一些数据以将值绑定到输入元素中并在同一

组件，我们也可以编辑其中的值。

Answer 1

首先，让我们仔细看看useEffect部分。什么意思？

1. 如果更改了任何道具
2. 并且新值的组合被赋予一些有意义的值(不是未定义的(
3. 我们根据这些 props 初始化input的值，即使我们必须覆盖自定义值

如何测试？更改道具并验证input的value.

基于此，我们最多可能有 3(仅更改第一个道具，仅更改第二个或两者(* 2(如果结果是否undefined(* 2(如果已经提供并存储在useState中(= 12。但我认为详尽的测试不是一个好方法。所以我将大多数检查放在单个测试用例中：

it('re-init value for nested input after props changes', () => {
const wrapper = mount(<InputComponent />);
function getInput(wrapper) {
return wrapper.find("input").prop("value");
}
expect(getInput(wrapper).props("value")).toEqual("1"); // based on default props 
getInput(wrapper).props().onChange({ target: {value: "initial"} }); // imitating manual change
expect(getInput(wrapper).props("value")).toEqual("initial"); 
wrapper.setProps({data: {a: "some-a", b: "undefined"} });
expect(getInput(wrapper).props("value")).toEqual("initial");
wrapper.setProps({ item: { field: "c" } }); // data[item.field] is undefined
expect(getInput(wrapper).props("value")).toEqual("initial");
wrapper.setProps({ item: {field: "b" } }); // data[item.field] is "undefined"
expect(getInput(wrapper).props("value")).toEqual("initial");
wrapper.setProps({ item: {field: "a" } }); // data[item.field] is meaningful
expect(getInput(wrapper).props("value")).toEqual("some-a");
});

至于getValue助手 - 这是必需的，因为我们不能只记住input元素本身，例如：

const wrapper = mount(...);
const input = wrapper.find("input");
...
expect(input.prop("value")).toEqual();
...
expect(input.prop("value")).toEqual();

详细信息可以在Enzyme的文档中找到。或者只是知道我们需要在任何更新后重新运行find。

还要注意 Enzyme 的setProps不会替换当前的道具，而是通过合并来更新它们(以及 React 的setState对状态所做的(。