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 totalTests: 1 passed, 1 totalSnapshots: 0 totalTime: 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