React Redux测试提供程序包

jogvjijk  于 2023-10-19  发布在  React
关注(0)|答案(2)|浏览(117)

任何人都可以帮助我用Redux商店测试React应用程序。我的项目基于计数器Redux示例应用程序,该应用程序包含以下App.test.js文件。

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(
    <Provider store={store}>
      <App />
    </Provider>
  );

  expect(getByText(/learn/i)).toBeInTheDocument();
 });

当我运行测试时,它给出了错误:
TypeError:无法解构“React__namespace.useContext(...)”的属性“baseError”,因为它为null。
我认为这是因为我的应用程序正在从Reddit API获取数据,所以在返回这些数据之前,存储中没有任何内容。
上面的App.test.js测试适用于Redux示例项目,我认为这是因为该示例中的商店开始时有固定的值。
App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './App.css';
import Header  from './features/Header/Header';
import { Posts } from './features/Posts/Posts';
import { SubReddit } from './features/Subreddit/SubReddit';
import { Comments } from './features/Comments/Comments';
import Footer  from './features/Footer/Footer';

function App() {
  return (
    <div>
      <Header />
      <div className='homePage'>
        <SubReddit />
        <Routes>
          <Route path="/" element={<Posts />} />
          <Route path="/Comments" element={<Comments />} />
        </Routes>
      </div>
      <Footer />
    </div>
  );
}

export default App;

store.js

import { configureStore } from '@reduxjs/toolkit';
import postsReducer from '../features/Posts/postsSlice';
import subRedditReducer from 
'../features/Subreddit/subRedditSlice';
import commentsReducer from '../features/Comments/commentsSlice';

export const store = configureStore({ 
  reducer: {
    posts: postsReducer,
    subReddits: subRedditReducer,
    comments: commentsReducer
  },
});
mbyulnm0

mbyulnm01#

这似乎与react-router-dom的使用有关。
如果你想使用<Routes>,你的<App>应该被 Package 在一个Router中,比如<BrowserRouter/ >,如下所示:

import { BrowserRouter } from 'react-router-dom'

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

参见:https://stackoverflow.com/a/75728680/1489088
标签:https://reactrouter.com/en/main/router-components/browser-router

pdsfdshx

pdsfdshx2#

看起来App正在呈现一些组件,这些组件需要由react-router-dom路由器组件之一提供的路由上下文。App可以在常规代码中工作,因为您可能会将其 Package 在路由器中,但在单元测试中则不然。
一般来说,在非DOM环境中,比如Node.js,你不能或不应该使用BrowserRouter。在单元测试中,你可以使用MemoryRouter
<MemoryRouter>在内部将其位置存储在数组中。与<BrowserHistory><HashHistory>不同,它不绑定到外部源,如浏览器中的历史堆栈。* 这使得它非常适合需要完全控制历史堆栈的场景,例如测试 *。
范例:

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import { store } from './app/store';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(
    <Provider store={store}>
      <MemoryRouter>
        <App />
      </MemoryRouter>
    </Provider>
  );

  expect(getByText(/learn/i)).toBeInTheDocument();
});

如果您需要指定在任何特定的路由上,请使用initialEntriesinitialIndex属性。例如,如果您有一个App测试需要在"/comments"路径上,请使用以下命令:

<MemoryRouter initialEntries={["/", "/comments"]}>
  ...
</MemoryRouter>

FWIW我没有看到App在哪里呈现了一个带有文本“learn”的链接,所以我怀疑你在这个特定的测试中测试了太多。我怀疑“learn”链接是在Header中呈现的,应该用该组件的单元测试来测试。

相关问题