如何在此組件中測試 filterBooks function？ （反應 - 開玩笑 - 酶）

Question

我的組件：

const Books = ({books, searchField}) => {
 
 const filterBooks = () => {
   return books.filter(b => b.name.includes(searchField)) 
 }

 return (
    <BookList books={filterBooks()}/>
 )
}

書單組件：

const BookList = ({books}) => {
  return (
     books.map(b => {
        return<BookCard book={b}/>
     })
  )
}

書卡組件：

const BookCard =(book) => {
  return( 
        <div>
           <h2>{book.name}</h2>
           <p>{book.price}</p>
         </div>
   )

}

我需要測試filterBooks function，但是由於我使用的是功能組件，所以我不能使用instance()方法，因為它在功能組件中返回null

在 Class 組件中，我可以做我在功能組件中無法做到的事情：

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'}])
 })

我怎樣才能在我的功能組件中實現這一點？

Answer 1

您可以使用.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