javascript - 将 Setter 函数传递给子组件时的单元测试 UseState

Question

下面我有一个 UseState 钩子的示例，其中它的 setter 函数 ( setInputs ) 被传递给子组件 ( LoginForm )。

我在单元测试中遇到问题，我无法模拟更改setInputs，因此无法断言调用了调度。

如何模拟对setInputs道具的更改以更新inputs测试中的状态？

零件：

const Login = () => {
  const [inputs, setInputs] = useState({ email: '' });

  const handleSubmit = event => {
    event.preventDefault();

    if (!inputs.email) {
      return;
    }
    // Cannot Assert this
    dispatch(requestAuthentication(inputs.email));
  };

  return (
    <LoginForm
      setInputs={setInputs}
      handleSubmit={handleSubmit}
    />
  );
};

export default Login;

**登录表单 **

是比onChange输入的基本形式调用以下函数

const handleInputChange = event => {
    event.persist();

    props.setInputs(input => ({
      ...input,
      [event.target.name]: event.target.value,
    }));
  };

单元测试：

it('should return if no email is entered', () => {
    useDispatch.mockImplementation(() => jest.fn());
    useSelector.mockImplementation(() => jest.fn());

    requestAuthentication.mockImplementation((data, callback) => {
      callback();
    });

    const wrapper = shallow(
      <Login>
        <LoginForm {...props} />
      </Login>
    );

    wrapper
      .find('LoginForm')
      .props()
      .handleSubmit({
        preventDefault: () => {},
      });
    expect(requestAuthentication).not.toHaveBeenCalled();
  });

标签： javascriptjestjsuse-state