为什么在测试期间 useParams 在带有包装器的测试环境中返回未定义? [英] Why does useParams during test return undefined in test env with wrapper?

问题描述

我现在已经在 2 个不同的代码库中看到了这一点，但我很难过，因为它在实际浏览器中运行良好，但在测试中却没有:如果组件使用 useParams 钩子，则钩子会在测试:

I have seen this in 2 different code bases now and am stumped because it works fine in the actual browser but not the tests: if a component uses the useParams hook, the hook throws an error in the test:

错误:未捕获 [TypeError:无法解构 'undefined' 或 'null' 的属性 accountId.]

Error: Uncaught [TypeError: Cannot destructure property accountId of 'undefined' or 'null'.]

我正在使用 React 功能组件、React 测试库和 React-Router:

I am using React Functional Component, React Testing Library and React-Router:

//组件:

const Overview: FC = () => {
  const location = useLocation();
  console.log(location) // see below
  const { accountId } = useParams();
  console.log(accountId) // see below

  ... rest
}

控制台日志似乎已正确找到参数:

the console logs appear to have found the params properly:

console.log src/screens/Overview/index.tsx:66accountId:无数据

console.log src/screens/Overview/index.tsx:66 accountId: nodata

console.log src/screens/Overview/index.tsx:64位置:{ 路径名:'/mix/overview/nodata',搜索: ''，哈希:'',状态:未定义，键:'bn6zvv' }

console.log src/screens/Overview/index.tsx:64 location: { pathname: '/mix/overview/nodata', search: '', hash: '', state: undefined, key: 'bn6zvv' }

//使用 RTL 文档

test-utils 文件中控制台日志的结果看起来是正确的:

function renderWithProviders( ui, { route = '/', params = routes.root, history = createMemoryHistory({ initialEntries: [route] }), } = {}, apolloMocks ) { console.log("route:", route) // see below console.log("params:", params) // see below return { ...render( <Provider store={mockProviderStore}> <Router history={history}> <MockedProvider mocks={apolloMocks}> <Route path={params}> // tried to set path to "params" not "route" so the slug of /url/:accountId is properly set {ui} </Route> </MockedProvider> </Router> </Provider> ), history, }; }

console.log src/test-utils/index.js:19路线:/mix/overview/nodata

the result of the console log in the test-utils file looks correct:

console.log src/test-utils/index.js:20参数:/mix/overview/:accountId

console.log src/test-utils/index.js:19 route: /mix/overview/nodata

//自我测试

// test itself

我正在尝试推荐的工作#kentdodds 在测试中使用 await 使状态更改正确解决.

test('it works', async () => { const { findByText } = renderWithProviders(<Overview />, { route: routes.overview('1234567890'), // => path/1234567890 params: routes.overview(), // => path/:accountId }); await findByText('loading configs...'); await waitForElementToBeRemoved(() => getByText('loading configs...')); await findByText('View your stuff now. It works!'); });

React-Router 钩子没有正确获取路由参数是怎么回事?

I am trying the recommended work around from #kentdodds to use await in the tests which lets state changes to settle correctly.

推荐答案

请确保，即使您有一个带有 Router/Route 的包装器，如建议的那样，您要测试的组件也用带有参数的 Route 包装:

解决方案

>

<Route path="/mix/config/:param1/:param2/:param3" >
        <Config />
      </Route>

这篇关于为什么在测试期间 useParams 在带有包装器的测试环境中返回未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！