Test that a component does not render when passed a certain prop value with enzyme

Question

I am wanting to test if my LoadingIndicator component loads into the DOM when the status property is set to FETCHING and doesn't load when it is READY. Right now I have this:

import React from 'react';
import { assert } from 'chai';
import { shallow, mount } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';

describe('LoadingIndicator', () => {
  it('should render when the status is FETCHING', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
    assert.ok(wrapper);
  });

  it('should not render when the status is READY', () => {
    const wrapper = mount(<LoadingIndicator status={STATUSES.READY} />);
    assert.isNotOkay(wrapper);
  });
});

The component itself looks like this:

import React, { PropTypes } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import { STATUSES } from '../reducers/status';
import '../styles/LoadingIndicator.scss';

export default class LoadingIndicator extends React.Component {
  render() {
    return (
      this.props.status === STATUSES.READY ? null :
      <div className="loader-div">
        <CircularProgress className="loader" />
      </div>
    );
  }
}

LoadingIndicator.propTypes = {
  status: PropTypes.string.isRequired,
};

This doesn't seem to be the correct way to check if it renders or not though, I get

  1) LoadingIndicator should not render when the status is READY:
     AssertionError: expected { Object (component, root, ...) } to be falsy

Any idea how I can properly test if this component loads depending on the property it is given?

Thanks.

score 2 · Accepted Answer · answered Jan 25 '17 at 15:13

Hi so I ended up figuring this out myself. I should have thought about the fact that since I'm doing a shallow render, I am able to just look if the div renders or not, so I end up with:

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import LoadingIndicator from '../../src/components/LoadingIndicator';
import { STATUSES } from '../../src/reducers/status';

describe('LoadingIndicator', () => {
  it('should render when the status is FETCHING', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.FETCHING} />);
    expect(wrapper.find('div')).to.have.length(1);
  });

  it('should not render when the status is READY', () => {
    const wrapper = shallow(<LoadingIndicator status={STATUSES.READY} />);
    expect(wrapper.find('div')).to.have.length(0);
  });
});

and that works (tested for both positive/negative on both).

score -3 · Answer 2 · answered Jan 25 '17 at 02:05

-3

You could check The Component Lifecycle. Especially shouldComponentUpdate().

From that, you can simple add

shouldComponentUpdate(nextProps, nextState) {
    if (...) {
      return true;
    }
    else {
      return false;
    }
  }

to decide if render this component.

answered Jan 25 '17 at 02:05

fumihwh

1,239
7
13

I don't believe Enzyme can support that, really what I want to do is see if it is returning the element or 'null' in the test – Alioo Jan 25 '17 at 14:55

Test that a component does not render when passed a certain prop value with enzyme

2 Answers2