reactjs - React-Boilerplate 默认测试抛出 TypeError : Cannot read property 'store' of null

Question

我正在使用 React-Boilerplate编写一个应用程序，我想测试连接的 react 组件。默认的“npm run generate”脚本生成一个带有默认测试的组件/容器。 index.test.js 脚本默认失败并出现以下错误，我无法纠正它。

我认为此错误与测试中缺少 redux“上下文”有关。如何提供上下文以便定义“store”属性？为什么 IntlProvider 不自动为组件提供上下文？

测试代码(Jest):

import { render } from 'react-testing-library';
import { IntlProvider } from 'react-intl';
// import 'jest-dom/extend-expect'; // add some helpful assertions

import { TestConnectedComponent } from '../index';
import { DEFAULT_LOCALE } from '../../../i18n';

describe('<TestConnectedComponent />', () => {
  it('Expect to not log errors in console', () => {
    const spy = jest.spyOn(global.console, 'error');
    const dispatch = jest.fn();
    render(
      <IntlProvider locale={DEFAULT_LOCALE}>
        <TestConnectedComponent dispatch={dispatch} />
      </IntlProvider>,
    );
    expect(spy).not.toHaveBeenCalled();
  });

  it('Expect to have additional unit tests specified', () => {
    expect(true).toEqual(true);
  });

收到错误:

    FAIL app/containers/TestConnectedComponent/tests/index.test.js 
   <TestConnectedComponent /> › Expect to not log errors in console

        TypeError: Cannot read property 'store' of null


  at app/utils/injectReducer.js:95:44
  at commitHookEffectList (node_modules/react-dom/cjs/react-dom.development.js:17283:26)
  at commitPassiveHookEffects (node_modules/react-dom/cjs/react-dom.development.js:17307:3)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:149:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
  at commitPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:18774:9)
  at wrapped (node_modules/scheduler/cjs/scheduler-tracing.development.js:207:34)
  at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:18822:5)
  at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:20570:3)
  at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:20600:10)
  at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:20657:10)
  at ReactRoot.Object.<anonymous>.ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:20953:3)
  at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:21105:12)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:21155:12)
  at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1175:14)
  at render (node_modules/react-testing-library/dist/index.js:79:26)
  at Object.<anonymous> (app/containers/TestConnectedComponent/tests/index.test.js:27:37)

Answer 1

您的初步分析是正确的；这是由商店不存在引起的错误。默认生成的容器测试不会拉入和创建商店。

react-intl 提供 React 组件和 API 来处理国际化。它不会提供商店。

要以与 React-Boilerplate 兼容的格式添加商店，请执行以下操作:

首先设置导入

import { Provider } from 'react-redux';
import configureStore from '../../../configureStore';

然后在您的第一个“它”上方创建商店

let store;

beforeAll(() => {
    store = configureStore();
});

最后在你的测试中使用商店

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

带有新位的代码...

import { render } from 'react-testing-library';
import { IntlProvider } from 'react-intl';
// import 'jest-dom/extend-expect'; // add some helpful assertions

import { TestConnectedComponent } from '../index';
import { DEFAULT_LOCALE } from '../../../i18n';

import { Provider } from 'react-redux';
import configureStore from '../../../configureStore';

describe('<TestConnectedComponent />', () => {

  let store;
  beforeAll(() => {
      store = configureStore();
  });

  it('Expect to not log errors in console', () => {
    const spy = jest.spyOn(global.console, 'error');
    const dispatch = jest.fn();
    render(
      <Provider store={store}>
          <IntlProvider locale={DEFAULT_LOCALE}>
            <TestConnectedComponent dispatch={dispatch} />
          </IntlProvider>
      </Provider>,
    );
    expect(spy).not.toHaveBeenCalled();
  });

  it('Expect to have additional unit tests specified', () => {
    expect(true).toEqual(true);
  });