检查子组件是否呈现 - Jest、Enzyme答案

【问题标题】：Check if child component rendered - Jest, Enzyme检查子组件是否呈现 - Jest、Enzyme
【发布时间】：2018-12-01 07:11:21
【问题描述】：

在我的单元测试中，我想测试父组件是否成功渲染了它的子组件。代码如下：

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.find(Child).length).toEqual(1);
  });
});

家长：

const Parent = observer(({ store }) => {
  const bookList = toJS(store.planets);
  return (
    <div>
      <div className={style.planet_container}>
        {bookList.map(book => {
          return <Child key={book.name} name={book.name} />;
        })}
      </div>
    </div>
  );
});

以上代码取自here，但它不起作用。我收到以下错误：

预期 1，收到 0'

我哪里出错了？我正在使用 Enzyme 3.3 和 Jest 23.1.0。

【问题讨论】：

您试图在子组件中查找子组件。我认为应该是这样的：const wrapper = shallow(<Parent store={store} />);
这里复制代码时打错了。上面固定。
您是否在测试中导入该子组件？如果没有，试试这个：expect(wrapper.find('Child').length).toEqual(1); 或尝试导入子组件。
是的，我正在导入它，但仍然无法正常工作
尝试使用mount 创建您的包装器，因为shallow 不会渲染子级。看看这个：github.com/airbnb/enzyme/issues/465#issuecomment-227697726

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

您可以使用containsMatchingElement()检查父组件是否已渲染其子组件。

基于酶docs:

返回 patternNode 反应元素是否匹配渲染树中的任何元素。

您的测试应如下所示：

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.containsMatchingElement(<Child />)).toEqual(true);
  });
});

【讨论】：

containsMatchingLement 应该是 containsMatchingElement？
您没有在测试文件中定义Child
@vsync 确保您在测试文件中包含您正在测试的子组件，因此会出现错误

【解决方案2】：

Enzyme 允许通过组件的displayName 查找：

来自酶 API 文档：

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('Foo')).to.have.lengthOf(1);

因此，为了测试确保子组件已被渲染，您可以简单地通过它的 displayName 引用它。

你可以print the wrapper's HTML string:console.log( wrapper.debug() )

如果您的组件是 dynamic，您可以将其 displayName 设置为固定的，这样测试会更加安全：

const MyComponent = props.dynamicChildComponent;
MyComponent.displayName = 'Foo';

【讨论】：

我想达到同样的效果，但是使用反应测试库。我该怎么做？？
@CodeOfLife - 你没有使用 Enzyme？
我正在使用反应测试库
@CodeOfLife - 这里的讨论只是关于jest + enzyme，对于您的问题，您需要检查是否有其他人已经问过这个问题，如果没有，请打开一个新问题。在他人的 cmets 内提出新问题并不好

【解决方案3】：

孩子没有渲染，因为你没有正确地模拟道具（在本例中是道具“存储”）。

试试这个：

it('renders Child component', () => {
  const wrapper = shallow( < Parent / > );
  wrapper.setProps({
    store: {
      planets: [{
          name: "name 1"
        }
      ]
    }
  });
  expect(wrapper.find(Child)).toHaveLength(1);
});

【讨论】：

您没有在测试中定义Child
我也没有定义Parent，应该在文件开头导入，路径取决于具体项目，所以和答案无关

【解决方案4】：

试试这个：

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent />);
    expect(wrapper.find(Child)).toHaveLength(1);
  });
});

【讨论】：

【解决方案5】：

如果要检查子组件元素

 let wrapper1 = mount(<PersonalInfo {...personalInfodata} />);
    expect(wrapper1.find('ChildComponent').children(0).find('.description').text().length).toBeGreaterThan(0);

你可以这样做

【讨论】：