Simulate change on input does not call a function - reactjs

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?

Answer 1

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