Test whether React component has rendered

14,076

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.

Share:
14,076
Dave Cooper
Author by

Dave Cooper

I'm Dave and I like to write the codes. Give me a buzz if you want to talk about the codes.

Updated on June 28, 2022

Comments

  • Dave Cooper
    Dave Cooper over 1 year

    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!

  • Dave Cooper
    Dave Cooper almost 7 years
    That's what I was thinking but then I realised that I shouldn't be snapshot testing this - it makes more sense to conditionally render the component in the parent/base component that uses it. This way the child component is actually reusable :)