reactjs - 编写 enzyme 测试时何时使用 "Component.WrappedComponent"

我正在尝试做的事情:

我正在尝试按照以下模式使用 enzyme 中的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 />不起作用？

最佳答案

通过使用.WrappedComponent，您可以访问由redux的connect函数包装的组件。
我假设您的大多数组件都是connect ed(因为.WrappedComponent的使用没有问题)，并且抛出描述的错误的组件不是connect ed。

我建议您阅读redux docs以了解如何为这种情况编写测试。简要地说，他们建议为connect ed组件默认导出，而对raw组件不默认导出。然后仅导入原始组件以进行测试，如下所示:

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

之后，您将能够像这样mount(或shallow)您的原始组件:

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