监视 React 子组件方法

Question

我正在尝试用 jest 和 enzyme 测试我的 React 组件。我有一个使用 react-skylight 组件的表单组件。我在表单提交上触发 .show() 函数，并且在服务器响应成功时触发。

我目前的测试是这样的：

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', () => {
        const popupShowSpy = jest.spyOn(Popup.prototype, 'show');
        const myForm = mount(<MyForm />);
        myForm.update();

        myForm.find('form').simulate('submit');
        expect(popupShowSpy).toHaveBeenCalled();
    });
});

但我在运行测试时遇到错误：

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called.

我发现 here 讨论了类似的问题，但对我来说它不起作用。

解决方案：

问题出在 axios 模块上。它正在更新组件，但是被嘲笑的响应没有得到解决，所以多亏了这个 post ，我已经设法编写了测试。我将子组件函数调用包装在父组件自己的函数中并监视该父函数。

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', async() => {
        const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup');
        const myForm = mount(<MyForm />);

        const response = Promise.resolve({
          data: {
              message: 'Error: some error'
          },
          status: 400
        });
        axios.post = jest.fn(() => response);
        myForm.find('form').simulate('submit');
        await response;
        myForm.update(); // <- child component is rendered correctly
        expect(popupShowSpy).toHaveBeenCalled();
    });
});

Answer 1

解决方案：

问题出在 axios 模块上。它正在更新组件，但是被模拟的响应没有得到解决，所以多亏了这个 post ，我已经设法编写了测试。我将子组件函数调用包装在父组件自己的函数中并监视该父函数。

import MyForm from './MyForm';
import Popup from 'react-skylight';

describe('<MyForm />', () => {
    it('should show popup on success', async() => {
        const popupShowSpy = jest.spyOn(MyForm.prototype, 'showPopup');
        const myForm = mount(<MyForm />);

        const response = Promise.resolve({
          data: {
              message: 'Error: some error'
          },
          status: 400
        });
        axios.post = jest.fn(() => response);
        myForm.find('form').simulate('submit');
        await response;
        myForm.update(); // <- child component is rendered correctly
        expect(popupShowSpy).toHaveBeenCalled();
    });
});

监视 React 子组件方法

Spying on React child component method

reactjs

unit-testing

jestjs

enzyme

spy