CODEWITHSUNDEEP
javascriptreactjsreact-reduxjestjscreate-react-app
wildlifehexagon
wildlifehexagon

Reputation: 523

React-Redux/Jest Invariant Violation: Could not find "store"

I have a simple test file set up that is almost identical to the one used by 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);
});

When I run yarn test I keep getting this error message:

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

I have tried doing separate exports in my App.js file and importing the non-Redux component, but I still can't get this to work. Here are my other two files that are involved:

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

What am I overlooking here? The app works properly on its own, but I can't figure out for the life of me why the test is failing.

Upvotes: 6

Views: 3810

Answers (1)

Beno&#238;t d&#39;Oncieu
Beno&#238;t d&#39;Oncieu

Reputation: 141

With the code you submitted, you should not have the error you specified. In order to test without decorating your component with Redux, you want your test to import you App component like this:

import { App } from './App'

Which you already did! However, the output from your test looks like you did have it like this at some point:

import App from './App'

So check again, make sure you saved your test file, etc...

Upvotes: 7

Related Questions