React-Boilerplate默认测试抛出TypeError:无法读取null的属性“”store“”

Question

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

我认为这个错误与测试中缺少重复的“上下文”有关。如何提供上下文以便定义"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

您的初始分析是正确的；这是由于存储而不是existing.The默认生成的容器测试没有引入和创建存储而导致的错误。

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

要以与React-Boilerplate兼容的格式添加存储，请执行以下操作：

首先设置导入

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

然后在你的第一个'it‘上方创建一个商店

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);
  });