Тестирование подключенных компонентов

Question

У меня проблема с тестированием моих компонентов, упакованных в HOC.У меня есть компонент класса, который обернут 2 HOC (Redux Form и Connect).Я не хочу тестировать подключенные компоненты.Я хочу проверить методы внутри класса.

Я прочитал на Redux docs , что вы можете протестировать компонент класса отдельно, экспортировав его из файла компонента и импортировав названный компонент втестовый файл.Я сделал это и до сих пор не могу проверить методы класса.Я также пытался использовать метод энзимного погружения (), чтобы обойти HOC, что затем дало мне ошибку:

Инвариантное нарушение: не удалось найти «store» ни в контексте, ни в подпунктах «Connect (Form (MyComponent)) "

Файл компонента:

export class MyComponent extends Component {
  getThing() {
    return thing;
  }
  render() {
    <Form >
      ...
    </Form>
  }
}

MyComponent = reduxForm({
  ...
})(MyComponent)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

Тестовый файл:

import React from 'react';
import { shallow } from 'enzyme';

import { MyComponent } from '../MyComponent';

let wrapper;

describe('MyComponent tests', () => {
  beforeEach(() => {
    wrapper = shallow(<MyComponent />).dive().dive()

  it('has a getThing method', () => {
    const instance = wrapper.instance();
    expect(instance.getThing).toBeDefined();
  }); //Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(MyComponent))"
});

Я ожидаю, что метод будет определен, но явсе еще получаю ошибку инвариантного нарушения.Я также пытался не использовать dive () и ожидал, что метод будет определен, но получил неопределенный.Любое понимание того, что я делаю не так?

Answer 1

Попробуйте экспортировать MyComponent без переназначения его значения и сохраните обернутый компонент reduxForm в новой переменной.

export class MyComponent extends Component {
  getThing() {
    return thing;
  }
  render() {
    <Form >
      ...
    </Form>
  }
}

const MyComponentReduxForm = reduxForm({
  ...
})(MyComponent)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponentReduxForm);

Или удалите переменную все вместе и оберните ее непосредственно в connect:

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(reduxForm({
  ...
})(MyComponent));

Answer 2

Я скопировал и вставил ваш код в свой собственный тест, и в вашем коде было несколько ошибок, но после их исправления все работало без ошибок. Я отметил некоторые вещи, которые я исправил относительно вашего примера кода.

// Class code
export class MyComponent extends Component {
  getThing() {
    // FIXED: Don't forget to define thing... and you probably mean this.thing
    return thing;
  }
  render() {
    // FIXED: You weren't returning the HTML element here
    return <Form />;
  }
}


// Test code
let wrapper;

describe("MyComponent tests", () => {
  beforeEach(() => {
    // FIXED: You don't need the .dive.dive here
    wrapper = shallow(<MyComponent />);
  // FIXED: Missing closing bracket around the beforeEach
  });

  it("has a getThing method", () => {
    const instance = wrapper.instance();
    expect(instance.getThing).toBeDefined();
  }); //Invariant Violation: Could not find "store" in either the context or props of "Connect(Form(MyComponent))"
});

Что касается вашей ошибки, при импорте кода компонента не забывайте, что

MyComponent = reduxForm({
  ...
})(MyComponent)

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

На самом деле работает, что означает, что функция connect также работает. Возможно, лучше разделить ваш container и ваш component код на два разных файла, чтобы было проще тестировать компонент отдельно, чем контейнер.

Что касается модульного тестирования контейнера, то в поиске Google "тестирование контейнеров с избыточностью" должны быть найдены ответы на некоторые вопросы о том, как настроить макеты, необходимые для успешного выполнения соединения в модульных тестах.