Когда использовать "Component.WrappedComponent" при написании ферментных тестов

Question

Что я пытаюсь сделать:

Я пытаюсь использовать shallow рендеринг из фермента, следуя приведенной ниже схеме, которая работает для многих других компонентов в моем проекте.

describe('>> MyComponent - Render', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<MyComponent.WrappedComponent
      actions={{}}
      history={}
    />);
  });

  it("test something", () => { expect(wrapper).toEqual(1); });

});

В чем проблема у меня:

Я получил сообщение об ошибке "Невозможно прочитать свойство contextTypes неопределенного", что означает wrapper является undefined, Но когда я меняюсь <MyComponent.WrappedComponent /> чтобы просто <MyComponent />Тесты пройдены успешно. Это мой код:

describe('>> Legends - render', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Legends textsAndColor={[]} />);
  });

  it('+++ render the component', () => {
    expect(wrapper.length).toEqual(1);
  });

  it('+++ match snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });
});

Вопрос у меня есть:

Что именно делает .WrappedComponent делать? И почему <MyComponent /> работает но не <MyComponent.WrappedComponent />?

Answer 1

Используя .WrappedComponent вы получаете доступ к компоненту, обернутому избыточным connect функция. Я предполагаю, что большинство ваших компонентов connect ed (так как нет проблем с использованием .WrappedComponent) и компонент, который выдает описанную ошибку, не connect редактор

Я предлагаю вам прочитать документы в формате Redx, чтобы узнать, как писать тесты для этого случая. Кратко сказал, что они предлагают экспорт по умолчанию для вашего connect ed компонент и не по умолчанию для необработанного компонента. А затем импортируйте только необработанный компонент для тестирования, например:

import { MyComponent } from './path/to/my/component`;

после этого вы сможете mount (или же shallow) ваш необработанный компонент вот так:

describe('>> MyComponent - Render', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<MyComponent />);
  }
});