CODEWITHSUNDEEP
reactjsjestjs
Giant Elk
Giant Elk

Reputation: 5685

Jest warns of missing prop when it is there

How can I suppress this Warning in Jest with this ReactJS component:

Warning: Failed propType: Required prop post was not specified in MyShowOnePost.

I'm calling the React component via TestUtils.renderIntoDocument with the post prop.

MyShowOnePost-test.js

describe('MyShowOnePost', () => {

    const instance = TestUtils.renderIntoDocument(
        <MyShowOnePost post={post} />
    );

MyShowOnePost.js

export default class MyShowOnePost extends React.Component {
  render() {
    return (
      <div>
        One Post: {this.props.post.content}
      </div>
    );
  }
}

MyShowOnePost.propTypes = {
  post: React.PropTypes.object.isRequired
};

Upvotes: 0

Views: 1090

Answers (1)

Joe
Joe

Reputation: 387

Your props won't be available in your testing file-- you need to mock these in some fashion. This is how I've been writing Jest tests to test Components, which has been working well for my team (note we're using the Enzyme library):

MyShowOnePost-test.js

import { mount } from 'enzyme';
import MyShowOnePost from './MyShowOnePost'

describe('MyShowOnePost', () => {
  const fakeProps = { post: 'I'm a post!' };

  it('renders the post content', () => {
      const component = mount(<MyShowOnePost post={fakeProps.post} />);

      expect(component.containsMatchingElement(<div>One Post: {'I'm a post!'}</div>).toBeTruthy();
  });
});

This has been fairly easy and clean. We do use the enzyme library to mount the component, and if you want to test using snapshots, that would be another way to double check your component is being mounted and rendering correctly.

Upvotes: 2

Related Questions