[TypeError: (0 , react_router_dom_1.useParams) is not a function]

Question

我有一个组件使用 react-router-dom 的 useParams 钩子来获取参数。

它在我的组件中用作：

/// Child.tsx

const Child = () => {
    const {id} = useParams();
    return <div>Child!</div>
}

在编写单元测试时，我在安装组件时遇到了上述错误。

我试过的东西是这样模拟 useParams :

jest.mock('react-router-dom', () => ({         /// This is at top level after imports
  ...jest.requireActual('react-router-dom'),
  useParams: () => ({
    id: 'txnabcd',
  }),
}))

单元测试：

descibe("mounts", ()=>{
      it("mounts the component", ()=>{
         mount(<Child />       /// Failing here 
       })
  })

我哪里可能错了？

Answer 1

您可以尝试将 Child 组件呈现到路由上下文中，并使用 id 路由参数进行路由，而不是模拟第 3 方代码。

示例：

import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';

describe("mounts", () => {
  it("mounts the component", () => {
    mount(
      <Router initialEntries={["/test/1234"]}>
        <Routes>
          <Route path="/test/:id" element={<Child />} />
        </Routes>
      </Router>
    ); 
  });
});

Answer 2

我最终嘲笑了 react-router-dom 的 useParams

// __ 模拟 __/react-router-dom.js

const reactRouter = require('react-router-dom')
const useParams = jest.fn()
module.exports = {
  ...reactRouter,
  useParams,
}

内部 test-file useParams 的标准导入和 mockReturnvalue:

import { useParams } from 'react-router-dom'
...
useParams.mockReturnValue({ id: 'txnabcd' })

[TypeError: (0 , react_router_dom_1.useParams) is not a function]

[TypeError: (0 , react_router_dom_1.useParams) is not a function]

reactjs

jestjs

react-router

enzyme