Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value
The error means, the function sampleMethod
you defined inside the functional component SampleComponent
is not defined in SampleComponent.prototype
. So SampleComponent.prototype.sampleMethod
is undefined
, jest can't spy on a undefined
value.
So the correct way to test sampleMethod
event handler is like this:
index.spec.tsx
:
import React from 'react';
import SampleComponent from './';
import { shallow } from 'enzyme';
describe('SampleComponent', () => {
test('should handle click correctly', () => {
const logSpy = jest.spyOn(console, 'log');
const wrapper = shallow(<SampleComponent></SampleComponent>);
const button = wrapper.find('button');
expect(button.text()).toBe('Click Me');
button.simulate('click');
expect(logSpy).toBeCalledWith('hello world');
});
});
We can spy on console.log
, to assert it is to be called or not.
Unit test result with 100% coverage:
PASS src/react-enzyme-examples/02-react-hooks/index.spec.tsx
SampleComponent
✓ should handle click correctly (19ms)
console.log node_modules/jest-mock/build/index.js:860
hello world
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.tsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 5.036s
Dependencies version:
"react": "^16.11.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
sample.js
import * as React from 'react';
export let util = {sampleMethod: null };
const SampleComponent = () => {
util.sampleMethod = () => {
console.log('hello world');
};
return <button onClick={sampleMethod} type="button">Click Me</button>;
};
export default SampleComponent;
sample.test.js
import { shallow } from 'enzyme';
import SampleComponent, {util} from './sample';
test('testing spy', () => {
const spy = jest.spyOn( util, 'sampleMethod' );
const wrapper = shallow(<SampleComponent />);
wrapper.find('button').simulate('click');
expect(spy).toHaveBeenCalled(1);
});
I know I'm late to answer but I think this would help some other developers also