Mocha & Enzyme - 如何测试 React 组件没有子组件？答案

【问题标题】：Mocha & Enzyme - How to test that React component has no children?Mocha & Enzyme - 如何测试 React 组件没有子组件？
【发布时间】：2017-05-03 15:29:36
【问题描述】：

对于测试，我使用 mocha 和 enzyme 以及 chai 和 chai-enzyme 进行测试断言。

假设我在 React 中有以下展示组件：

import React from 'react'

import { Component, PropTypes } from 'react';

const LayerList = (props) => (
    <div>

    </div>
    )

LayerList.PropTypes = {
    layers: PropTypes.arrayOf(PropTypes.string).isRequired,
    layerActions: PropTypes.shape({
        addLayer: PropTypes.func,
        removeLayer: PropTypes.func,
        toggleDragLayer: PropTypes.func,
        moveLayerIndex: PropTypes.func,
        updateLayerColour: PropTypes.func,
        toggleLayerVisibility: PropTypes.func
    }).isRequired
}

export default LayerList

当 layers 属性是一个长度为 0 的数组时，我如何使用 Enzyme 和 Mocha 来测试这个组件没有子组件？

这是我目前的尝试：

   it('should render only one div as first child element if layers prop is empty array', () => {
      const wrapper = shallow(<LayerList layers={[]}/>);    
      expect(wrapper.type()).to.equal('div');
       expect(wrapper.children()).length.to.equal();
    });

【问题讨论】：

标签： reactjs mocha.js enzyme

【解决方案1】：

ShallowWrapper 上的.children() 应该这样做：

const wrapper = shallow(<LayerList layers={[]} />);
expect(wrapper.children()).to.have.length(0);

【讨论】：