React-Redux/Jest 不变违规：找不到“商店”

Posted 2023-02-22

【中文标题】React-Redux/Jest 不变违规：找不到“商店”

【英文标题】：React-Redux/Jest Invariant Violation: Could not find "store"

【发布时间】：2018-03-14 05:12:42

【问题描述】：

我设置了一个与 create-react-app 使用的几乎相同的简单测试文件：

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);
);

当我运行 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)".

我尝试在我的 App.js 文件中单独导出并导入非 Redux 组件，但我仍然无法使其正常工作。这是我涉及的另外两个文件：

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

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'));

我在这里忽略了什么？该应用程序可以自行正常运行，但我终其一生都无法弄清楚测试失败的原因。

【参考方案1】：

使用您提交的代码，您不应该出现您指定的错误。为了在不使用Redux 装饰您的组件的情况下进行测试，您希望您的测试导入您的App 组件，如下所示：

import  App  from './App'

你已经做到了！但是，您的测试输出在某些时候看起来确实是这样的：

import App from './App'

所以再次检查，确保您保存了测试文件等...

【讨论】：

原来我正在修改我的旧 App.test.js 文件......不知道我是如何忽略的。感谢您向我保证我没有失去理智！