Test input Search box with React testing library

Question

I have a SearchBox component:

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

I tried the following:

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

But then I get an error:

Error: Uncaught [TypeError: setSearch is not a function]

How and what can I test on this SearchBox component?

You need to pass in the props the component defines when you render it. And don't test the value of the input, it's not actually that component's job to update it, test the callback was invoked with the right value. — jonrsharpe
– jonrsharpe, Commented Oct 13, 2020 at 20:15

ecoplaneteer · Accepted Answer · 2022-10-28 09:57:48Z

13

The issue is that setSearch props wasn't provided.

setSearch can be provided by jest mock function.

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

Full test code snippet:

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') // OR
      expect(setSearch).toHaveBeenCalledWith('test')
    })
  })

edited Oct 28, 2022 at 9:57

answered Oct 14, 2020 at 2:23

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Test input Search box with React testing library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related