React-testing-library：在组件上下文中找不到“store”

Question

我对测试还很陌生，所以尽量温和！我正在尝试设置react-testing-library，但遇到了令人困惑的错误消息：

我定义了一个自定义渲染器，其中包含我的所有提供程序，包括。还原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 }

但是当尝试执行测试时，我收到错误消息：

错误：未捕获[不变违规：在“Connect(withRouter(Header))”上下文中找不到“store”。将根组件包装在 中，或者将自定义 React 上下文提供者传递给连接选项中的 Connect(withRouter(Header)) 并将相应的 React 上下文使用者传递给 Connect(withRouter(Header))。]

据我所知，我包括了商店。有没有解决的办法？

这个问题不是以下问题的重复：Invariant Violation: Could not find "store" in Either the context or props of "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);
});

我希望这能给您带来想法并有所帮助！