Simulate change on input does not call a function

Question

I learning to write unit tests in React. The test should check if an onChange function is called when there is a change in the input field. This is my simple search bar component:

import {Input} from './Input';

const SearchBar = (props) => {
  return (
    <Input 
      type="search"
      data-test="search"
      onChange={e => props.onSearch(e.target.value)} />
  );
};

export default SearchBar;

The test I wrote is supposed to simulate a change on input field, what in turn should invoke a function call.

describe('Search', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('Should call onSearch function', () => {
    const wrapper = mount(<SearchBar onSearch={onSearch}/>);
    const searchBar = wrapper.find('[data-test=search]').at(0);
    searchBar.simulate('change', {target: { 'test' }});
    expect(onSearch).toBeCalledTimes(1);
  });
});

Here, instead of being called 1 time, the function is not called at all. I cannot figure out why. Can you explain where am I making a mistake?

Lin Du · Accepted Answer · 2021-08-06 02:24:01Z

You should create a mocked onSearch using jest.fn(). The CSS selector should be '[data-test="search"]'.

E.g.

SearchBar.tsx:

import React from 'react';

function Input(props) {
  return <input {...props} />;
}

const SearchBar = (props) => {
  return <Input type="search" data-test="search" onChange={(e) => props.onSearch(e.target.value)} />;
};

export default SearchBar;

SearchBar.test.tsx:

import { mount } from 'enzyme';
import React from 'react';
import SearchBar from './SearchBar';

describe('Search', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('Should call onSearch function', () => {
    const onSearch = jest.fn();
    const wrapper = mount(<SearchBar onSearch={onSearch} />);
    const searchBar = wrapper.find('[data-test="search"]').at(0);
    searchBar.simulate('change', { target: { value: 'test' } });
    expect(onSearch).toBeCalledTimes(1);
  });
});

test result:

 PASS  examples/68669299/SearchBar.test.tsx (7.33 s)
  Search
    ✓ Should call onSearch function (47 ms)

---------------|---------|----------|---------|---------|-------------------
File           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------|---------|----------|---------|---------|-------------------
All files      |     100 |      100 |     100 |     100 |                   
 SearchBar.tsx |     100 |      100 |     100 |     100 |                   
---------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.002 s, estimated 9 s

Collectives™ on Stack Overflow

Simulate change on input does not call a function

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