Reactjs 用jest和酶测试反应成分,覆盖率问题
我有一个简单的组件select,它包含一个选项列表。在它里面,我使用map渲染列表。我使用jest和Ezyme测试组件,并制作快照。不幸的是,覆盖范围抱怨地图及其内部的功能,这会产生选项元素 如何以正确的方式进行测试,以获得100%的覆盖率 覆盖范围:Reactjs 用jest和酶测试反应成分,覆盖率问题,reactjs,jestjs,enzyme,Reactjs,Jestjs,Enzyme,我有一个简单的组件select,它包含一个选项列表。在它里面,我使用map渲染列表。我使用jest和Ezyme测试组件,并制作快照。不幸的是,覆盖范围抱怨地图及其内部的功能,这会产生选项元素 如何以正确的方式进行测试,以获得100%的覆盖率 覆盖范围: -------------------|----------|----------|----------|----------|-------------------| File | % Stmts | % Bran
-------------------|----------|----------|----------|----------|-------------------|
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();
});
});
渲染器将不会渲染renderBookItems。因此,您的测试只包括书单,您需要为renderBookItems添加一些额外的测试。最后,我在Ezyme repo中发现了一个问题,它为我指明了一条路径 我对我的测试做了一点修改,以考虑呈现的BookListItem
感谢@oliver.voron给出您的答案,即使我在解决问题后阅读了它:因为您传递的是空数组renderBookItems将永远不会被调用。所以它被排除在测试之外。
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);
});
});