如何使用 Jest 测试 React Router

Question

我是玩笑测试的新手，我想测试以下代码。

\n

import React from "react";\nimport "./ButtonLogin.css";\nimport { Link } from 'react-router-dom';\n\nfunction ButtonLogin() {\n    return (\n        <Link to="/login"> <button className="button-login">Iniciar sesi\xc3\xb3n</button></Link>\n    )\n}\n\nexport default ButtonLogin;\n

\n

import { MemoryRouter } from 'react-router-dom';\nimport { render, fireEvent, Link } from '@testing-library/react';\nimport { ButtonLogin } from './ButtonLogin';\n\nit('routes to a new route', async () => {\n\n  ButtonLogin = jest.fn();\n\n  const { getByText } = render(\n    <MemoryRouter ButtonLogin={ButtonLogin}>\n      <Link to="/login">Iniciar sesi\xc3\xb3n</Link>\n    </MemoryRouter>\n  );\n\n  fireEvent.click(getByText('Iniciar sesi\xc3\xb3n'));\n\n  expect(ButtonLogin).toHaveBeenCalledWith('/login');\n});\n

\n

我已经执行了以下测试，但失败了，并且在第 9 行中收到以下错误。\n路由到新路由

\n

"ButtonLogin" is read-only.\n

\n

Answer 1

您可以使用该createMemoryHistory功能和Router组件来测试它。创建带有初始条目的内存历史记录来模拟当前位置，这样我们就不会依赖于真实的浏览器环境。触发单击事件后，断言pathname更改是否正确。

\n

ButtonLogin.tsx:

\n

import React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction ButtonLogin() {\n  return (\n    <Link to="/login">\n      <button className="button-login">Iniciar sesi\xc3\xb3n</button>\n    </Link>\n  );\n}\n\nexport default ButtonLogin;\n

\n

ButtonLogin.test.tsx:

\n

import { fireEvent, render } from '@testing-library/react';\nimport React from 'react';\nimport { Router } from 'react-router-dom';\nimport ButtonLogin from './ButtonLogin';\nimport { createMemoryHistory } from 'history';\ndescribe('ButtonLogin', () => {\n  test('should change current location to login when button is clicked', () => {\n    const history = createMemoryHistory({ initialEntries: ['/home'] });\n    const { getByText } = render(\n      <Router history={history}>\n        <ButtonLogin />\n      </Router>\n    );\n    expect(history.location.pathname).toBe('/home');\n    fireEvent.click(getByText('Iniciar sesi\xc3\xb3n'));\n    expect(history.location.pathname).toBe('/login');\n  });\n});\n

\n

测试结果：

\n

 PASS  examples/69878146/ButtonLogin.test.tsx (10.675 s)\n  ButtonLogin\n    \xe2\x9c\x93 should pass (41 ms)\n\n-----------------|---------|----------|---------|---------|-------------------\nFile             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s \n-----------------|---------|----------|---------|---------|-------------------\nAll files        |     100 |      100 |     100 |     100 |                   \n ButtonLogin.tsx |     100 |      100 |     100 |     100 |                   \n-----------------|---------|----------|---------|---------|-------------------\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        11.722 s, estimated 12 s\n

\n

软件包版本："react-router-dom": "^5.2.0"

\n