Реагируйте: как передать «хранилище» подключенным компонентам?

Question

Я абсолютный новичок Реакта. Я пытаюсь написать тест для этого компонента:

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchAccountsList } from "../actions/index";
import { Table } from "react-bootstrap";

export class Accounts extends Component {

  componentDidMount() {
    this.props.fetchAccountsList();
  }

  render() {
    return (
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Created at</th>
            <th>Updated at</th>
          </tr>
        </thead>
        <tbody>
          {this.props.accountsList ? this.props.accountsList.map(el => (
              <tr key={el.id}>
                <td>{el.id}</td>
                <td>{el.email}</td>
                <td>{el.created_at}</td>
                <td>{el.updated_at}</td>
              </tr>
            ))
          : ''}
        </tbody>
      </Table>
    );
  }
}

function mapStateToProps(state) {
  return {
    accountsList: state.accountsList
  };
}

export default connect(
  mapStateToProps,
  { fetchAccountsList }
)(Accounts);

Импортировано непосредственно внутри App.js

<Container>
      <Row>
        <Col>
          <h1>Accounts</h1>
          <Accounts />
        </Col>
      </Row>
    </Container>
    <Footer />

Это действие внутри actions/index.js

[...]
export function fetchAccountsList() {
  return function(dispatch) {
    return API.get("/accounts")
    .then(res => {
      dispatch({ type: LOADED_ACCOUNTS_LIST_SUCCESSFULLY, payload: res.data});
    });
  };
}
[...]

А это reducers/index.js файл главного редуктора

const initialState = {
  accountsList: []
};

function rootReducer(state = initialState, action) {

  switch (action.type) {

    case LOADED_ACCOUNTS_LIST_SUCCESSFULLY: {
      return Object.assign({}, state, {
        accountsList: action.payload.data
      });
    }

    default: {}
  }

  return state;
};

Я издевался над топором ios и этот тест я пишу

import React from 'react';
import { render } from '@testing-library/react';
import mockAxios from 'axios'
import configureMockStore from 'redux-mock-store'
import { Provider } from 'react-redux';
import Accounts from "../js/components/Accounts";

test('Render a list of account', async () => {
  const mockStore = configureMockStore()
  const store = mockStore()

  const mockData = [
    {
      "id": 1,
      "email": "info@example.com",
      "created_at": "2020-05-01",
      "updated_at": "2020-05-01"
    }
  ];

  mockAxios.get.mockResolvedValue(() =>
    Promise.resolve({ data: mockData })
  )

  const expectedActions = [
    { type: "LOADED_ACCOUNTS_LIST_SUCCESSFULLY" }
  ]

  const {getByText} = render(<Provider store={store}><Accounts /></Provider>)
  expect(getByText('info@example.com')).toBeDefined();

  // ASSERTIONS / EXPECTS
  expect(store.getActions()).toEqual(expectedActions)
})

Ошибка I получил это

Error: Uncaught [Error: Could not find "store" in the context of "Connect(Accounts)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Accounts) in connect options.]

Как я могу проверить подключенный компонент? Большое спасибо

Answer 1

Сначала необходимо настроить хранилище, а затем передать его родительскому компоненту

export const configureStore = () => {
const store = createStore(
    rootReducer,

  );
return store;

}

<Provider store={store}>
 <App />
 </Provider>