未调用 React 测试库模拟函数

IT技术 reactjs jestjs react-testing-library
2021-05-01 11:59:20

我对测试和尝试为我们的项目编写一个简单的测试非常陌生...... 

test('Attempt Login', async () => {
   const submitHandler = jest.fn( ()=> console.log('hello'))

  const { debug, getByText, getByTestId, getByPlaceholderText } = render
    (
    <Router>
        <LoginPage submitHandler={submitHandler} />
    </Router> 
    )

    fireEvent.change(getByPlaceholderText("Enter Username"), {
      target: { value: "admin" }
    });

    fireEvent.change(getByPlaceholderText("Enter Password"), {
      target: { value: "Password" }
    });


    fireEvent.click(getByTestId("login-btn"));

    expect(submitHandler).toHaveBeenCalled()
})

我的登录按钮 

   <Button data-testid="login-btn" type="submit" variant="contained" color="primary"
   onClick={(event)=>submitHandler(event)}>

测试错误

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

    Expected number of calls: >= 1
    Received number of calls:    0

      45 |     fireEvent.click(getByTestId("login-btn"));
      46 |   
    > 47 |     expect(submitHandler).toHaveBeenCalled()
         |                           ^
      48 | })
      49 | 
      50 |

在此先感谢您的帮助。我已经在这上面花了太长时间-_-

编辑：尝试测试单击登录按钮的结果

这是我要尝试的：

mock an Axios call to the login route
await waitForElement getByText('home')
expect getbytext('home')

我在正确的轨道上吗？

我是否需要导入重定向页面组件并将其放置在路由器中？例如它重定向到它的组件？

2个回答

正如您已经发现的那样，问题是您将submitHandler模拟传递给了，LoginPage但您没有使用该props。

回答你的第二个问题

如何模拟未作为props传入的函数？

以下是如何模拟从不同文件导入的函数Jest：

import { submitForm } from './ajax.js'; // the function to mock
jest.mock('./ajax.js'); // jest mocks everything in that file

it('should call submitForm correctly', async () => {
  submitForm.mockResolvedValue({ loggedIn: true });
  render(<LoginPage />);
  
  userEvent.click(screen.getByRole('button', { name: 'Login' }));

  expect(submitForm).toHaveBeenCalledTimes(1);
  expect(await screen.findByText('You have logged in successfully')).toBeInTheDocument();
});

有用的链接

在这种情况下，您应该使用waitFor：

...
await waitFor(() => expect(submitHandler).toHaveBeenCalled())
...

更多信息在这里

其它你可能感兴趣的问题
上一篇React 导入语句的标准方法 下一篇如何在react导航中处理两个导航器？