如何在这个组件中测试filterBooks函数？？(反应- Jest -酶)
如何在这个组件中测试filterBooks函数？？(反应- Jest -酶)
提问于 2021-02-06 07:03:37
My组件：
const Books = ({books, searchField}) => {
const filterBooks = () => {
return books.filter(b => b.name.includes(searchField))
}
return (
<BookList books={filterBooks()}/>
)
}BookList组件：
const BookList = ({books}) => {
return (
books.map(b => {
return<BookCard book={b}/>
})
)
}BookCard组件
const BookCard =(book) => {
return(
<div>
<h2>{book.name}</h2>
<p>{book.price}</p>
</div>
)
}我需要测试filterBooks函数，但是由于我使用的是功能组件，所以不能使用instance()方法，因为它在功能组件中返回null
在类组件中，我可以完成在功能组件中无法实现的任务：
let wrapper;
beforeEach(() => {
let mockProps = {
books: [],
searchField: ''
}
wrapper = shallow(<Books/>);
})
it('filter Books correctly', () => {
mockProps = {
books: [
{
name: 'ants',
price: '$10'
},
{
name: 'the secret',
price: '$10'
}
],
searchField: 'a'
}
wrapper = shallow(<Books {...mockProps}/>)
expect(wrapper.instance().filterBooks().toEqual([{name: 'ants', price: '$10'}])
})如何在我的功能组件中实现这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-18 08:02:10
您可以使用.find(selector) => ShallowWrapper查找BookList组件的浅包装器，并检查其books支柱。
例如。
Books.js
import React from 'react';
import BookList from './BookList';
const Books = ({ books, searchField }) => {
const filterBooks = () => {
return books.filter((b) => b.name.includes(searchField));
};
return <BookList books={filterBooks()} />;
};
export default Books;BookList.js
import React from 'react';
import BookCard from './BookCard';
const BookList = ({ books }) => {
return books.map((b) => {
return <BookCard book={b} />;
});
};
export default BookList;Books.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Books from './Books';
import BookList from './BookList';
describe('66074394', () => {
it('should pass', () => {
const mockProps = {
books: [
{
name: 'ants',
price: '$10',
},
{
name: 'the secret',
price: '$10',
},
],
searchField: 'a',
};
const wrapper = shallow(<Books {...mockProps} />);
expect(wrapper.find(BookList).prop('books')).toEqual([{ name: 'ants', price: '$10' }]);
});
});单元测试结果：
PASS examples/66074394/Books.test.js
66074394
✓ should pass (6 ms)
-------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------|---------|----------|---------|---------|-------------------
All files | 83.33 | 100 | 50 | 82.35 |
BookCard.js | 75 | 100 | 0 | 75 | 4
BookList.js | 66.67 | 100 | 0 | 66.67 | 5-6
Books.js | 100 | 100 | 100 | 100 |
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.57 s页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66074394
复制相关文章
相似问题
腾讯云开发者
