Test whether React component has rendered

Question

I have a React component that I am trying to test using Enzyme/Jest. I am trying to figure out what the most appropriate test would be to ensure the component has rendered.

My component has a prop shouldRender that, if false, will cause the component to not render. My component looks like this:

import React from 'react';

const propTypes = {
  shouldRender: React.PropTypes.bool,
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }

  render() {
    if (!this.props.shouldRender) {
      return null;
    }

    return (
      <div>
        <span>My component</span>
      </div>
    );
  }
}

MyComponent.propTypes = propTypes;

export default MyComponent;

I have a test that looks like this:

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../MyComponent';

describe('MyComponent', () => {
  it('Should render if we want it to', () => {
    const component = shallow(<MyComponent shouldRender />);

    expect(component).toBeDefined(); // Passes
  });

  it('Should not render if we do not want it to', () => {
    const component = shallow(<MyComponent />);

    expect(component).not.toBeDefined(); // Does not pass, as component isn't undefined.
  });
});

I'd like the second test to fail, as the component isn't rendering. Is there a better way to go about testing whether or not a component has rendered?

Happy to provide any more information if it is needed.

Thanks!

Answer 1

So I've had a chat to some people and decided that maybe I am going about this the wrong way.

It's probably a better idea to determine whether or not this gets rendered by the parent component, otherwise any time I want to use MyComponent, I am going to have to pass this shouldRender prop into it.

MyComponent now looks like this:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }

  render() {
    return (
      <div>
        <span>My component</span>
      </div>
    );
  }
}

MyComponent.propTypes = propTypes;

export default MyComponent;

and MyParentComponent that uses MyComponent looks like this:

import React from 'react';

const propTypes = {
  myComponent: React.PropTypes.bool,
};

class MyParentComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      boz: 'baz',
    };
  }

  render() {
    return (
      <div>
        { this.props.myComponent && 
          <MyComponent />
        }
      </div>
    );
  }
}

export default MyComponent;

Not only does allow MyComponent to be more reusable, it removes the need for the test I wanted to write altogether. Thank you to everyone that looked at this.

Answer 2

I think Jest's snapshot testing is what you need. With snapshot testing when a test fails you can check to see if it's intended or unintended change. Check out their example here