Question

我是测试新手，无法弄清楚如何测试TextField组件中的变化值

   export const ParentComponent = ({
    question,
    onValueChange
    }: ParentProps) => {

    const [value, setValue] = useState(default);

    const onChange = event => {
    const answer = event.target.value;
    setValue(answer);
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      onValueChange(question);
     }, 500);
    };

return (
    <TextField
      className={classes.textField}
      InputLabelProps={{
        className: classes.color
      }}
      onChange={onChange}
      value={value || ""}
    />);
   };

这是我到目前为止从其他阅读中得到的答案，不确定如何处理onValueChange和onChange之间的区别：

describe("ParentComponent", () => {
  let mount;
   
  beforeEach(() => {
    mount = createMount();
  });
  afterEach(() => {
    mount.cleanUp();
  });
  it("renders", () => {
    const wrapper = mount(<ParentComponent question={Question} onValueChange={() => {}} />);
    expect(wrapper).not.toBeNull();
  });



 it("Should change value when text is entered", () => {
        const onChange = jest.fn();
        const wrapper = mount(<ParentComponent question={Question} onValueChange={() => {}} />);
        const event = {
          target: {
            value: "This is just for test"
          }
        };
        wrapper.find(TextField).simulate("change", event);
        expect(onChange).toHaveBeenCalled();
        expect(onChange).toHaveBeenCalledWith("This is just for test");
      });

出现此错误：

Error: expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls:    0

Answer 1

首先，您必须监视onChange函数：

const onChange = jest.spyOn(TextField.prototype, 'onChange');

@material-ui提供了复杂的组件，所以我想您应该像这样进行测试（还要注意，酶的find()返回了节点的集合）：

wrapper.find(TextField).find('input').at(0).simulate('change', event);

如何使用Jest和酶

1 个答案: