javascript - React-Redux/Jest Pelanggaran Invarian: Tidak dapat menemukan "store"

Saya mempunyai satu set fail ujian yang mudah yang hampir sama dengan yang digunakan oleh 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);
});

Apabila saya menjalankan yarn test saya terus mendapat mesej ralat ini:

Pelanggaran Invarian: Tidak dapat menemukan "store" dalam konteks atau props bagi "Connect(App)". Sama ada bungkus komponen akar dalam <Provider>, atau secara jelas hantarkan "store" sebagai prop kepada "Connect(App)".

Saya telah mencuba membuat eksport berasingan dalam fail App.js saya dan mengimport komponen bukan Redux, tetapi saya masih tidak dapat membuat ini berfungsi. Berikut adalah dua fail lain saya yang terlibat:

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

Apa yang saya terlepas di sini? Aplikasi ini berfungsi dengan baik sendiri, tetapi saya tidak dapat memahami mengapa ujian itu gagal.

Jawapan #1

Dengan kod yang anda hantar, anda tidak sepatutnya menghadapi ralat yang anda nyatakan. Untuk menguji tanpa menghias komponen anda dengan Redux, anda mahu ujian anda mengimport komponen App anda seperti ini:

import { App } from './App'

Yang mana anda sudah lakukan! Walau bagaimanapun, hasil daripada ujian anda kelihatan seperti anda ada menyusunnya sebegini pada suatu ketika:

import App from './App'

Jadi semak semula, pastikan anda menyimpan fail ujian anda, dan sebagainya...