时间戳

首页 > 解决方案 > 用玩笑和酶测试反应成分，覆盖率问题

reactjs - 用玩笑和酶测试反应成分，覆盖率问题

问题描述

我有一个简单的组件（选择），它需要一个选项列表。在其中我使用地图呈现列表。我使用 jest 和酵素测试组件并制作快照。不幸的是，覆盖范围抱怨其中的地图和功能，这会产生选项元素。

如何以正确的方式对其进行测试以获得 100% 的覆盖率？

覆盖范围：

-------------------|----------|----------|----------|----------|-------------------|
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();
  });
});

标签： reactjsjestjsenzyme

解决方案

酶浅不会呈现renderBookItems。因此，您的测试仅涵盖BookList，您需要为renderBookItems.

推荐阅读