Test whether React component has rendered
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.
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, 2022Comments
-
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 almost 7 yearsThat'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 :)