React-testing-library: не удалось найти «store» в контексте компонента

Question

Я довольно новичок в тестировании, поэтому постарайтесь быть нежным! Я пытаюсь настроить реагирующую библиотеку и застрял с ошибочным сообщением об ошибке:

Я определил пользовательский рендер, который содержит все мои провайдеры, в том числе. redux Provider:

import React from 'react';
import { render } from '@testing-library/react'
import { ThemeProvider } from 'styled-components';
import { defaultTheme } from 'shared/theme';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from 'reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

const AllTheProviders = ({ children }) => {
  return (
      <Provider store={store}>
        <ThemeProvider theme={defaultTheme}>
            {children}
        </ThemeProvider>
      </Provider>
  )
}

const customRender = (ui, options?) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

Но при попытке выполнить тест я получаю сообщение об ошибке:

Ошибка: Uncaught [Invariant Violation: Не удалось найти «хранилище» в контексте «Connect (withRouter (Header))». Либо оберните компонент root в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React для Connect (withRouter (Header)) в параметрах соединения.]

Насколько я могу видно, я включил магазин. Есть ли способ обойти это?

Этот вопрос не является дубликатом: Инвариантное нарушение: Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (SportsDatabase)» Так как в нем используется глобальный рендерер.

Answer 1

store необходимо проверять, чтобы проверить правильно. Я предлагаю использовать библиотеку redux-mock-store для достижения этой цели, но это зависит от ваших предпочтений.

В вашем случае я хотел бы попробовать следующее:

import configureMockStore from 'redux-mock-store';

const mockStore = configureMockStore();
const store = mockStore({ /* here you can create a mock object for the reducer */ });

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Provider store={store}>
                     { /* your components */ }
                  </Provider>, div);
  ReactDOM.unmountComponentAtNode(div);
});

Я надеюсь, что это дает вам идею и помогает!