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 ponent 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 ponent, 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 './ponents/header';
import Footer from './ponents/footer';

import './style/App.css';

// use named export for unconnected ponent (for tests)
export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      recentUsers: [],
      allTimeUsers: []
    }
  }

  ponentWillMount() {
    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 ponent (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.

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 ponent 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 ponent, 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 './ponents/header';
import Footer from './ponents/footer';

import './style/App.css';

// use named export for unconnected ponent (for tests)
export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      recentUsers: [],
      allTimeUsers: []
    }
  }

  ponentWillMount() {
    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 ponent (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.

• javascript
• reactjs
• react-redux
• jestjs
• create-react-app

1 Answer 1

With the code you submitted, you should not have the error you specified. In order to test without decorating your ponent with Redux, you want your test to import you App ponent 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...