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部分。这是什么意思？

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

如何测试？更改道具并验证input的{{1}}。

基于此，我们最多可能有3个（仅更改了第一个道具，只有第二个或两个）* 2（如果结果为value或没有）* 2（如果已经提供并存储了自定义值在undefined中）是否等于12。但是我认为穷举测试不是一个好方法。因此，我将大多数检查放在单个测试用例中：

useState

对于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

详细信息可以在Enzyme's docs中找到。或者只是知道我们需要在任何更新后重新运行const wrapper = mount(...); const input = wrapper.find("input"); ... expect(input.prop("value")).toEqual(); ... expect(input.prop("value")).toEqual();。

还请注意，酶的find不会替代当前的道具but update them by merging（以及React的setProps带有状态）。

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

1 个答案: