Question

我想做的事情：

我尝试使用来自酶的shallow渲染，遵循以下模式，该模式适用于我项目中的许多其他组件。

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

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

});

我遇到的问题是什么：

我收到错误消息＆＃34; 无法读取属性＆＃39; contextTypes＆＃39;未定义的＆＃34;，这意味着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，您可以访问由redux的connect函数包装的组件。我假设你的大部分组件都是connect（因为使用.WrappedComponent没有问题）和抛出描述错误的组件不是connect。

我建议您阅读redux docs以了解如何为此案例编写测试。简单地说，他们建议您为connect ed组件进行默认导出，对原始组件进行非默认导出。然后仅导入原始组件用于测试目的，如下所示：

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

在此之后，您可以mount（或shallow）原始组件，如下所示：

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

何时使用＆＃34; Component.WrappedComponent＆＃34;在编写酶测试时

1 个答案: