javascript - React-Redux/Jest Invariáns megsértés: Nem található a „store”

Van egy egyszerű tesztfájlom, amely majdnem azonos azzal, amit a create-react-app használ:

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

Amikor futtatom a yarn test parancsot, folyamatosan ezt a hibát kapom:

Invariant Violation: Nem található a „store” sem a „Connect(App)” kontextusában, sem a propjaiban. Vagy csomagolja a gyökér komponenst egy <Provider> elembe, vagy adja át külön a „store” propként a „Connect(App)” komponensnek.

Megpróbáltam külön exportokat csinálni az App.js fájlomban, és importálni a nem-Redux komponenst, de még mindig nem tudom működésre bírni. Íme a másik két kapcsolódó fájlom:

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

Mit hagyok itt figyelmen kívül? Az alkalmazás önmagában rendesen működik, de az ég világon nem tudom kitalálni, miért hibázik a teszt.

Válasz #1

A beküldött kóddal nem kellene, hogy előjöjjön a megadott hibád. Ahhoz, hogy teszteld anélkül, hogy a komponensedet a Redux-szal dekorálnád, a tesztednek így kell importálnia az App komponensedet:

import { App } from './App'

Amit már megtettél! Azonban a teszted kimenete úgy néz ki, mintha valamikor így lett volna nálad:

import App from './App'

Szóval ellenőrizd újra, győződj meg róla, hogy elmentetted a tesztfájlodat, stb...