[英]React-Redux/Jest Invariant Violation: Could not find “store”
I have a simple test file set up that is almost identical to the one used by create-react-app: 我有一个简单的测试文件设置,几乎与create-react-app使用的文件相同:
App.test.js App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
When I run yarn test
I keep getting this error message: 当我运行yarn test
我不断收到此错误消息:
Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "st ore" as a prop to "Connect(App)".
I have tried doing separate exports in my App.js file and importing the non-Redux component, but I still can't get this to work. 我已经尝试在我的App.js文件中执行单独的导出并导入非Redux组件,但我仍然无法使其工作。 Here are my other two files that are involved: 以下是我涉及的另外两个文件:
App.js App.js
import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import TableList from './containers/table_list';
import Header from './components/header';
import Footer from './components/footer';
import './style/App.css';
// use named export for unconnected component (for tests)
export class App extends Component {
constructor(props) {
super(props);
this.state = {
recentUsers: [],
allTimeUsers: []
}
}
componentWillMount() {
axios.all([this.fetchRecentUsers(), this.fetchAllTimeUsers()])
.then(axios.spread((recentUsers, allTimeUsers) => {
this.setState({ recentUsers: recentUsers.data, allTimeUsers: allTimeUsers.data });
}))
.catch((error) => {
console.log(error)
});
}
fetchRecentUsers() {
return axios.get(RECENT);
}
fetchAllTimeUsers() {
return axios.get(ALLTIME);
}
render() {
return (
<div>
<Header />
<div className="container">
<TableList users={this.state.recentUsers} />
</div>
<Footer />
</div>
)
}
}
const mapStateToProps = state => (
{ recentUsers: state.recentUsers, allTimeUsers: state.allTimeUsers }
)
// use default export for the connected component (for app)
export default connect(mapStateToProps)(App);
index.js index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers/index';
import App from './App';
import './style/index.css';
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
What am I overlooking here? 我在这里俯瞰什么? The app works properly on its own, but I can't figure out for the life of me why the test is failing. 该应用程序可以自行运行,但我无法弄清楚为什么测试失败了。
With the code you submitted, you should not have the error you specified. 使用您提交的代码,您不应该有您指定的错误。 In order to test without decorating your component with Redux
, you want your test to import you App
component like this: 为了在不使用Redux
组件的情况下进行测试,您希望测试导入App
组件,如下所示:
import { App } from './App'
Which you already did! 你已经做过了! However, the output from your test looks like you did have it like this at some point: 但是,测试的输出看起来像是在某些时候确实如此:
import App from './App'
So check again, make sure you saved your test file, etc... 所以再次检查,确保您保存了测试文件等...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.