testing react component with jest and enzyme, problem with coverage

Question

I have a simple component (select), which takes a list of options. Inside it I render the list using map. I test the component using jest and enzyme and I make a snapshot. Unfortunately, the coverage complains about the map and function inside it, which produces option elements.

How to test it in the proper way to have 100% coverage?

coverage:

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
  BookList.js      |    83.33 |      100 |       50 |      100 |                   |
  BookListItem.js  |      100 |      100 |      100 |      100 |                   |

BookList.js

import React from 'react';
import { shape, string, arrayOf } from 'prop-types';

import BookListItem from './BookListItem';

const renderBookItems = book => <BookListItem
  key={book.id}
  title={book.volumeInfo.title}
/>;

const BookList = ({ books }) => <div>{books.map(renderBookItems)}</div>;

BookList.displayName = 'BookList';
BookList.propTypes = {
  books: arrayOf(shape({
    volumeInfo: shape({
      title: string,
    }),
    id: string,
  })),
};

export default BookList;

BookList.test.js

import React from 'react';
import { shallow } from 'enzyme';

import BookList from './BookList';

describe('<BookList />', () => {
  it('should match snapshot', () => {
    const wrapper = shallow(<BookList books={[]} />);
    expect(wrapper).toMatchSnapshot();
  });
});

since you are passing empty array renderBookItems will never been called. so it's excluded from test. — skyboyer
– skyboyer, Commented Oct 21, 2018 at 8:38

oliver.voron · Accepted Answer · 2018-10-21 08:38:28Z

1

Enzyme shallow will not render renderBookItems. So your test covers only BookList and you need to add some extra test for renderBookItems.

edited Oct 21, 2018 at 8:38

answered Oct 21, 2018 at 8:29

oliver.voron

714 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Isla · Accepted Answer · 2018-10-21 08:50:56Z

In the end, I found an issue in enzyme repo, which showed me a path.

I changed a little my tests to take in consideration rendered BookListItem

import React from 'react';
import { shallow } from 'enzyme';

import BookList from './BookList';
import BookListItem from './BookListItem';

const bookList = [
  {
    id: '1234qwer',
    volumeInfo: {
      title: 'A Book'
    }
  },
  {
    id: '1235qwer',
    volumeInfo: {
      title: 'A Book 2'
    }
  }
];

describe('<BookList />', () => {
  const wrapper = shallow(<BookList books={bookList} />);

  it('matches a snapshot', () => {
    expect(wrapper).toMatchSnapshot();
  });

  it('has 2 BookListItem elements', () => {
    const items = wrapper.find(BookListItem);
    expect(items.length).toEqual(2);
  });
});

Thank you @oliver.voron for your answer, even if I read it after I solved my problem :)

Collectives™ on Stack Overflow

testing react component with jest and enzyme, problem with coverage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related