如何使用 React 测试库 + Jest 模拟测试函数

Question

我正在使用 jest/react-testing-library 测试反应组件，无论我尝试什么，我都无法在我的测试中正确地模拟函数。每当我运行一个调用我试图模拟的组件函数之一的 fireEvent 时，它都会调用原始函数而不是我试图模拟的函数。我查看了 StackOverflow 上的所有相关问题，但没有一个解决方案适合我。

我尝试过同时使用 jest.fn() 和 jest.spyOn() 都没有成功。

我的模拟（对于来自组件“PasswordResetConfirmation”的函数）如下：

PasswordResetConfirmation.handleOkay = jest.fn(() => true)

test('handleOkay method is called when user clicks Okay button', () => {
  const {getByTestId} = render(<MemoryRouter><PasswordResetConfirmation/> </MemoryRouter>)

  let button = getByTestId('reset-confirm-button')
  expect(button).toBeInTheDocument();

  fireEvent.click(button) // this is where the mocked handleOkay method should be called but isn't
})

我将不胜感激有关如何让这个函数模拟工作的任何建议。

作为后续行动，我还尝试在这些测试中模拟来自不同文件（而不是来自我当前正在测试的组件）的函数，并且在调用原始函数而不是模拟。

谢谢！

Answer 1

也许下面的代码对你也有用。

    const mockFn = jest.fn(() => true);
    const { getByTestId } = render(
        <Provider store={store}>
            <RandomMeals/>
        </Provider>
        );
    const button = getByTestId("random-meals-button-test");
    fireEvent.click(button);
    expect(mockFn()).toBe(true);

Answer 2

用enzyme 和enzyme-react-adapter-15 试试（你必须通过npm 安装）

然后像这样测试它（注意你的 handleOk() 不能是箭头函数）：

import Enzyme, { mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
 
Enzyme.configure({ adapter: new Adapter() });


it('...', (done) => {
    const mockHandleOk = jest.spyOn(PasswordResetConfirmation.prototype, 'handleOk').mockImplementationOnce(() => {});

    const wrapper = mount(
        <MemoryRouter>
            <PasswordResetConfirmation/>
        </MemoryRouter>
    );

    const button = wrapper.find('#reset-confirm-button');
    expect(button).toHaveLength(1);

    button.simulate('click');

    setTimeout(function() {
        expect(mockHandleOk).toHaveBeenCalled();
    }, 500);
}