任何人都可以帮助我用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
},
});
2条答案
按热度按时间mbyulnm01#
这似乎与
react-router-dom
的使用有关。如果你想使用
<Routes>
,你的<App>
应该被 Package 在一个Router中,比如<BrowserRouter/
>,如下所示:参见:https://stackoverflow.com/a/75728680/1489088
标签:https://reactrouter.com/en/main/router-components/browser-router
pdsfdshx2#
看起来
App
正在呈现一些组件,这些组件需要由react-router-dom
路由器组件之一提供的路由上下文。App
可以在常规代码中工作,因为您可能会将其 Package 在路由器中,但在单元测试中则不然。一般来说,在非DOM环境中,比如Node.js,你不能或不应该使用
BrowserRouter
。在单元测试中,你可以使用MemoryRouter
。<MemoryRouter>
在内部将其位置存储在数组中。与<BrowserHistory>
和<HashHistory>
不同,它不绑定到外部源,如浏览器中的历史堆栈。* 这使得它非常适合需要完全控制历史堆栈的场景,例如测试 *。范例:
如果您需要指定在任何特定的路由上,请使用
initialEntries
和initialIndex
属性。例如,如果您有一个App
测试需要在"/comments"
路径上,请使用以下命令:FWIW我没有看到
App
在哪里呈现了一个带有文本“learn”的链接,所以我怀疑你在这个特定的测试中测试了太多。我怀疑“learn”链接是在Header
中呈现的,应该用该组件的单元测试来测试。