javascript - React-Redux/Jest Invariant Violation: Kunde inte hitta "store"

Jag har en enkel testfil upprättad som är nästan identisk med den som används av 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);
});

När jag kör yarn test får jag hela tiden detta felmeddelande:

Invariant Violation: Kunde inte hitta "store" varken i kontexten eller i props för "Connect(App)". Antingen omsluter du rotkomponenten med en <Provider> eller så skickar du uttryckligen "store" som en prop till "Connect(App)".

Jag har försökt göra separata exporteringar i min App.js-fil och importera den icke-Redux-komponenten, men jag kan fortfarande inte få detta att fungera. Här är mina andra två filer som är inblandade:

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

Vad missar jag här? Appen fungerar korrekt på egen hand, men jag kan inte förstå för mitt liv varför testet misslyckas.

Svar #1

Med den kod du skickade in bör du inte ha det fel du specificerade. För att testa utan att dekorera din komponent med Redux vill du att ditt test importerar din App-komponent på detta sätt:

import { App } from './App'

Vilket du redan gjorde! Men resultatet från ditt test ser ut som att du hade det så här vid något tillfälle:

import App from './App'

Så kontrollera igen, se till att du har sparat din testfil, osv...