Reagieren-Redux/Jest unveränderliche Verletzung: Kann nicht finden „store“

Question

Ich habe eine einfache Testdatei eingerichtet, dass fast identisch mit dem von create-reagieren-App verwendet wird:

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

Als ich yarn test betreibe ich erhalte immer diese Fehlermeldung:

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)".

Ich habe versucht, separate Exporte in meiner App.js-Datei auszuführen und die Nicht-Redux-Komponente zu importieren, aber ich kann dies immer noch nicht zum Laufen bringen. Hier sind meine beiden anderen Dateien, die beteiligt sind:

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

Was ich hier mit Blick auf? Die App funktioniert alleine einwandfrei, aber ich kann mir nicht vorstellen, warum der Test fehlschlägt.

Answer 1

Mit dem von Ihnen eingereichten Code sollten Sie nicht den von Ihnen angegebenen Fehler haben. Um ohne Dekoration Ihrer Komponente mit Redux zu testen, möchten Sie Ihre Test Sie App Komponente wie folgt importieren:

import { App } from './App' 

, die Sie bereits haben! Allerdings sieht die Ausgabe von Ihrem Test, wie Sie es wie folgt irgendwann hatte:

import App from './App' 

Also noch einmal überprüfen, stellen Sie sicher, dass Sie Ihre Testdatei gespeichert, etc ...