Failed React Jest Test when Expecting Mock Function to be called - reactjs

Question

Okay i've uploaded an even more straight forward example. I just can't get mock functions to be called when they are located inside of a helper function. Not sure what i'm doing wrong.
class TodoSearch extends Component {
handleSearch = () => {
const searchInput = this.searchInput.value;
// passed down from parent component
this.props.onSearch(searchInput);
};
handleCheckbox = e => {
const showCompleted = e.target.checked;
// passed down from parent component
this.props.onCheckbox(showCompleted);
};
render() {
return (
<form>
<FormGroup>
<FormControl
type="search"
className="todoSearchInput"
placeholder="Search"
inputRef={input => (this.searchInput = input)}
onChange={this.handleSearch}
/>
<Checkbox checked={this.props.checked} onChange={this.handleCheckbox}>
Show completed todos
</Checkbox>
</FormGroup>
</form>
);
}
}
export default TodoSearch;
So i'm using Jest and Enzyme as thus, the 'shallow'. This is what i've successful done so far
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import TodoSearch from './TodoSearch';
describe(TodoSearch, () => {
const searchText = 'Buy Milk';
const mockOnSearch = jest.fn();
const component = shallow(<TodoSearch onSearch={mockOnSearch} />);
it('should exist', () => {
const component = renderer.create(<TodoSearch />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('contains the form', () => {
expect(component.find('form')).toHaveLength(1);
expect(component.find('Checkbox')).toHaveLength(1);
expect(component.find('.todoSearchInput')).toHaveLength(1);
});
});
How can i test that onSearch inside the handleSearch is run? Tried a bunch of ways but just not getting it. Any help greatly appreciated.

Answer 1

Here is the solution, I simplify your component, remove the unrelated part.
dependencies:
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0",
"react": "^16.9.0",
TodoSearch.tsx:
import React, { Component } from 'react';
import console = require('console');
interface ITodoSearchProps {
onSearch(input): any;
onCheckbox(value): any;
}
class TodoSearch extends Component<ITodoSearchProps> {
private searchInput: HTMLInputElement | null = null;
constructor(props: ITodoSearchProps) {
super(props);
}
public handleSearch = () => {
if (this.searchInput) {
const searchInput = this.searchInput.value;
console.log('searchInput: ', searchInput);
// passed down from parent component
this.props.onSearch(searchInput);
}
}
public handleCheckbox = e => {
const showCompleted = e.target.checked;
// passed down from parent component
this.props.onCheckbox(showCompleted);
}
public render() {
return (
<form>
<input
type="search"
className="todoSearchInput"
placeholder="Search"
onChange={this.handleSearch}
ref={input => (this.searchInput = input)}
/>
</form>
);
}
}
export default TodoSearch;
TodoSearch.spec.tsx:
import React from 'react';
import TodoSearch from './TodoSearch';
import { mount } from 'enzyme';
describe('TodoSearch', () => {
const mockOnSearch = jest.fn();
const mockOnCheckbox = jest.fn();
it('should handle search correctly', () => {
const searchInput = 'jest';
const wrapper = mount(<TodoSearch onSearch={mockOnSearch} onCheckbox={mockOnCheckbox}></TodoSearch>);
(wrapper.find('input').instance() as any).value = searchInput;
wrapper.find('input').simulate('change');
expect(mockOnSearch).toBeCalledWith(searchInput);
});
});
Unit test result with coverage report:
PASS src/stackoverflow/47493126/TodoSearch.spec.tsx
TodoSearch
✓ should handle search correctly (50ms)
searchInput: jest
----------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files | 90 | 75 | 83.33 | 88.89 | |
TodoSearch.tsx | 90 | 75 | 83.33 | 88.89 | 24,26 |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.846s, estimated 6s
Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/47493126