Mocha & Enzyme - How to test that React component has no children?

1.6k views Asked by At

For testing I am using mocha and enzyme along with chai and chai-enzyme for test assertations.

Say I have the following presentational component in 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

How would I use Enzyme and Mocha to test that this component has no children when the layers prop is an array of length 0?

This is my current attempt:

   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();
    });

Mocha Test Result

1

There are 1 answers

0
moonwave99 On BEST ANSWER

.children() on ShallowWrapper should do:

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