Тестирование компонентов более высокого порядка с помощью шутки и энзима

Я создал тест для компонента более высокого порядка, но всякий раз, когда я запускаю тест, я получаю эту ошибку: Invariant Violation: Could not find "store" in either the context or props of "Connect(ExampleComponent)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(ExampleComponent)".

Я думаю, это может иметь какое-то отношение к тому, как я создал HOC как анонимную функцию, в которой я не могу экспортировать функцию подключения, но я не уверен, как я могу это исправить. Любая помощь / совет будут очень благодарны.

HOCExample.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

export default ComposedComponent => {
  class ExampleComponent extends PureComponent {
    //some logic here
    render() {
      return (
          <div style = {{ marginTop: 80 }}>
            <ComposedComponent {...this.props} />
          </div>
        )
      );
    }
  }

  ExampleComponent.contextTypes = {
    test: PropTypes.func.isRequired,
    example: PropTypes.func.isRequired
  };

  const mapStateToProps = ({ example }) => ({
    count: example.count,
  });

  const mapDispatchToProps = { getExampleCount };

  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(ExampleComponent);
};

HOCExample.test.js

import React from 'react';
import { shallow } from 'enzyme;'
import { default as HOCExample } from '../HOCExample';

const TestComponent = () => <h1>Test</h1>

const ComponentRendered = HOCExample(TestComponent)

describe('HOCExample', () => {
  const props = {
    example: []
  };

  it('renders authorized component', () => {
    const wrapper = shallow(<ComponentRendered {...props} />);
    expect(wrapper).toMatchSnapshot();
  });

  afterEach(() => {
    jest.clearAllMocks();
  });
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
3 312
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это решается согласно сообщению об ошибке, то есть с помощью Provider:

const wrapper = shallow(<Provider store = {dummyStore}><ComponentRendered {...props} /></Provider>);

Где dummyStore - это хранилище Redux, которое соответствует случаю, например, имеет свойство example.

Вы не передаете хранилище тестируемому компоненту.

Следующая статья - хороший источник информации о том, как настроить тестовый https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec.

redux-mock-store помогает имитировать магазин.

import configureMockStore from 'redux-mock-store';
const createMockStore = configureMockStore();
const defaultState = {} // whatever you want the default store state to be
const store = createMockStore(defaultState);

//helper wrapper function
const giveStore = (component, store) => {
  const context = {
    store,
  };
  return shallow(component, { context });
};

const wrapper = giveStore(<ComponentRendered {...props} />, store);

Вы можете преобразовать его в отдельный вспомогательный файл и сделать его многоразовым, например, передать больше параметров в помощник giveStore и передать эти свойства тестируемому компоненту (например, history).

Другие вопросы по теме