如何使用 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（如果已经提供了自定义值并存储在

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

不会替换当前的 props ，而是通过合并来更新它们（以及 React 的

setState

对状态的作用）。