Search code examples
reactjschaienzymechai-enzyme

How to test that a sub component doesn't exist with React+enzyme

Lets say I have a component that has a prop that controls whether a button is shown or not. I'm adding the following test to make sure that the prop is always observed.

import React from 'react';
import { expect } from 'chai';
import { mount } from 'enzyme';
import { MyComponent } from '..';

describe( 'MyComponent', () => {
    it( 'should render as expected', () => {
    const wrapper = mount( <MyComponent showButton={ false } /> );
    expect( wrapper.find( '.button' ) ).to.have.length( 0 );
} );

My question is: Is there a better way to test that something does not exist within a component?

I'm looking for something more verbose. Is there another chain like .to.not.exist?

Solution

  • If you use chaiEnzyme (https://github.com/producthunt/chai-enzyme) it will provide you with a .to.not.be.present() or .to.not.exist (https://github.com/producthunt/chai-enzyme#present) assertion that you can use to help clean up these kinds of assertions.