编写酶测试时何时使用“ 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 />为just时<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您可以访问由redux connect函数包装的组件。我假设您的大多数组件都是connected（因为使用没有问题.WrappedComponent），并且没有抛出描述错误的组件connect。

我建议您阅读redux文档，以了解如何为这种情况编写测试。简要地说，他们建议您的connected组件具有默认导出功能，而对于raw组件则具有非默认设置。然后仅导入原始组件以进行测试，如下所示：

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

之后，您将能够mount（或shallow）像这样的原始组件：

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