React - Jest/Enzyme 更改了触发器功能

Question

我有这个代码：

// button.js


const Button = ({ callbackRequestId, message }) => {
  const [isSending, setIsSending] = useState(false);

  const resendCallback = callbackRequestId => {
    setIsSending(true);
    setOpen(false);

    http
      .post(`/callback_request`, {})
      .then(response => {
        if (response) setIsSending(false);
      })
      .catch(error => {
        alert(error);
      })
      .then(() => {
        setIsSending(false);
      });
  };

  return (
    <div>
      {isSending ? (
        <CircularProgress size={25} />
      ) : (
        <Button
          variant="contained"
          id="send-callback-button"
          size="small"
          color="primary"
          onClick={resendCallback}
        >
          Resend
        </Button>
      )}
    </div>
  );
};

// test case

it('should trigger agree confirmation dialog', () => {
    const button = wrapper.find('#send-callback-button');

    button.simulate('click');

    const dialog = wrapper.find(ConfirmationDialog).shallow();

    dialog.find('#ok-button').simulate('click');

    expect(mockCallBack).toHaveBeenCalled();
});

问题是 resendCallback 函数有需要授权的 http 请求。我的问题是：如何忽略它或将其更改为 jest.fn() 以便它不返回错误？

我想测试 isSending 变为 true 并呈现 CircularProgress，但由于 http 测试用例失败。

Answer 1

在你的测试文件中，用

模拟模块函数

import http from 'http';
jest.mock('http');

并且在您的测试中让模拟 return post 的值与 mockResolvedValue :

it('should trigger agree confirmation dialog', () => {
    http.post.mockResolvedValue(<response>); // return whatever value you want
    const button = wrapper.find('#send-callback-button');

    button.simulate('click');

    const dialog = wrapper.find(ConfirmationDialog).shallow();

    dialog.find('#ok-button').simulate('click');

    expect(http.post).toHaveBeenCalled()
});

React - Jest/Enzyme 更改了触发器功能

React - Jest/Enzyme changed trigger function

unit-testing

reactjs

jestjs

enzyme