如何将 jest.spyOn 与 React 测试库一起使用

Question

我正在将类组件重构为功能组件。

在我的测试文件中，我使用的是酶，但我正在迁移到反应测试库

这是我正在使用酶进行的测试

it('should change module when clicked button login', () => {
     const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
     const instance = wrapper.instance()

     jest.spyOn(instance, 'setModule')
     wrapper.find('button#login-button').simulate('click')

     expect(instance.setModule).toHaveBeenCalled()
   })

这就是我尝试使用react-testing-library 做的事情

it('should change module when clicked button login', async () => {
     const { getByTestId } = render(<SignUp setModuleCallback={jest.fn()} />)
     const instance = getByTestId('submit')

     jest.spyOn(instance, 'setModule')

     const button = await waitFor(() => getByTestId('submit'))

     act(() => {
       fireEvent.click(button)
     })

     expect(instance.setModule).toHaveBeenCalled()
   })

这是我收到的错误

Answer 1

RTL 背后的理念是，您应该“按照软件的使用方式”来测试您的组件。考虑到这一点，是否有一种方法可以在不显式断言回调被调用的情况下测试您的组件？

根据您的测试名称，您期望某些“模块发生变化”。有没有办法在 DOM 中验证模块是否已更改？例如，也许每个“模块”都有一个唯一的标题，在这种情况下，您可以用来screen.getByText断言单击按钮后会呈现正确的模块。

如果您想显式断言调用了回调函数，您确定必须使用spyOn此测试吗？我会尝试这样的事情：

it('should change module when clicked button login', async () => {
  const mockCallback = jest.fn()
  const { getByTestId } = render(<SignUp setModuleCallback={mockCallback} />)

  const button = await waitFor(() => getByTestId('submit'))

  act(() => {
    fireEvent.click(button)
  })

  expect(mockCallback).toHaveBeenCalled()
})