如何使用 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;

谁能帮助我如何在 useEffect 中测试 setValue()

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

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

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

Answer 1

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

1. 如果任何道具发生变化
2. 新值的组合被赋予了一些有意义的值（不是未定义的）
3. 即使我们必须覆盖自定义值，我们也会根据这些道具初始化 input 的值

如何测试？更改 prop(s) 并验证 input 的 value。

基于此，我们最多可能有 3（仅更改第一个道具，仅更改第二个或两者）* 2（如果结果是 undefined 或不是）* 2（如果已经提供并存储在 @ 中的自定义值987654328@ 与否）= 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's docs。或者只是知道我们需要在任何更新后重新运行find。

还要注意 Enzyme 的 setProps 不会替换当前的 props but update them by merging（以及 React 的 setState 会替换状态）。