Question

我在测试包装在HOC中的组件时遇到问题。我有一个由2个HOC（Redux Form和Connect）包装的类组件。我不想测试连接的组件。我想测试类中的方法。

我在Redux docs上读到，您可以通过从组件文件中导出类组件并将命名的组件导入测试文件中来分别测试类组件。我已经做到了，但仍然无法测试类方法。我还尝试使用酶dive（）方法绕过HOC，这给了我一个错误：

永久违反：在“ 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))"
});

我希望定义该方法，但仍然出现Invariant Violation错误。我也尝试过不使用dive（）并期望方法已定义但未定义。对我在做什么错有任何见解吗？

Answer 1

我在自己的测试中复制并粘贴了您的代码，您的代码中有一些错误，但是在修复它们之后，一切运行得很顺利。我已经注意到了一些有关示例代码的问题。

对于您的错误，导入组件代码时请不要忘记

// 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代码分成两个不同的文件，以使其比容器更容易分别测试组件。

就对容器进行单元测试而言，Google搜索“测试redux容器”应该提供一些答案，说明如何设置连接以在单元测试中成功运行所需的模拟程序。

Answer 2

尝试导出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));

测试连接的组件

2 个答案: