带有 React 测试库的测试输入搜索框答案

【问题标题】：Test input Search box with React testing library带有 React 测试库的测试输入搜索框
【发布时间】：2021-01-28 05:23:02
【问题描述】：

我有一个 SearchBox 组件：

    function SearchBox({ search, setSearch }) {
      return (
        <div>
          <div>
            <input onChange={e => setSearch(e.target.value)} type="text" placeholder="Search..." value={search} />
          </div>
        </div>
      )
    }

我尝试了以下方法：

    describe('Input value', () => {
      it('updates on change', () => {
        const { queryByPlaceholderText } = render(<SearchBox />)
    
        const searchInput = queryByPlaceholderText('Search...')
    
        fireEvent.change(searchInput, { target: { value: 'test' } })
    
        expect(searchInput.value).toBe('test')
      })
    })

然后我得到一个错误：

错误：未捕获 [TypeError：setSearch 不是函数]

我可以如何以及在这个 SearchBox 组件上测试什么？

【问题讨论】：

渲染时需要传入组件定义的props。并且不要测试输入的值，更新它实际上不是该组件的工作，测试回调是否被正确的值调用。

标签： reactjs unit-testing jestjs react-testing-library

【解决方案1】：

问题是没有提供setSearch 道具。

setSearch可以通过jest mock函数提供。

const setSearch = jest.fn((value) => {})
const { queryByPlaceholderText } = render(<SearchBox setSearch={setSearch}/>)

完整的测试代码sn-p：

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import SearchBox from './SearchBox'
import '@testing-library/jest-dom/extend-expect'

describe('Input value', () => {
    it('updates on change', () => {
      const setSearch = jest.fn((value) => {})
      
      const { queryByPlaceholderText } = render(<SearchBox setSearch={setSearch}/>)
  
      const searchInput = queryByPlaceholderText('Search...')
  
      fireEvent.change(searchInput, { target: { value: 'test' } })
  
      expect(searchInput.value).toBe('test')
    })
  })

【讨论】：