Тесты по умолчанию React-Boilerplate выдают TypeError: невозможно прочитать свойство «хранилище» из null

Я использую React-Boilerplate для написания приложения и хочу протестировать подключенную реакцию составные части. Сценарий «npm run generate» по умолчанию создает компонент/контейнер с тестами по умолчанию. Сценарий index.test.js по умолчанию завершается со следующей ошибкой, и мне не удалось ее исправить.

Я считаю, что эта ошибка связана с отсутствием редукционного «контекста», существующего в тесте. Как я могу предоставить контекст, чтобы было определено свойство «магазин»? Почему IntlProvider не предоставляет контекст компоненту автоматически?

Тестовый код (шутка):

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)

reactjs jestjs react-boilerplate
person Jason1    schedule 12.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш первоначальный анализ верен; Это ошибка, вызванная тем, что хранилище не существует. Сгенерированные по умолчанию контейнерные тесты не загружаются и не создают хранилище.

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);
  });
person NickDr    schedule 08.07.2019