Given my ponent and test below, why does my confirmClickHandler
method still get called when I run my test?
Note: I noticed that when I change the method from a fat arrow function to just a regular function, it gets mocked out correctly. What am I missing here?
class CalendarConfirmation extends React.Component {
...
confirmClickHandler = (e) => {
...
}
}
and my test:
import React from 'react';
import {mount} from 'enzyme';
import CalendarConfirmation from '../ponents/CalendarConfirmation';
describe('Test CalendarConfirmation', () => {
let calendarConfirmation;
calendarConfirmation = mount (<CalendarConfirmation />);
calendarConfirmation.instance().confirmClickHandler = jest.fn();
...
}
Given my ponent and test below, why does my confirmClickHandler
method still get called when I run my test?
Note: I noticed that when I change the method from a fat arrow function to just a regular function, it gets mocked out correctly. What am I missing here?
class CalendarConfirmation extends React.Component {
...
confirmClickHandler = (e) => {
...
}
}
and my test:
import React from 'react';
import {mount} from 'enzyme';
import CalendarConfirmation from '../ponents/CalendarConfirmation';
describe('Test CalendarConfirmation', () => {
let calendarConfirmation;
calendarConfirmation = mount (<CalendarConfirmation />);
calendarConfirmation.instance().confirmClickHandler = jest.fn();
...
}
Share
Improve this question
edited Dec 15, 2017 at 20:19
doelleri
19.7k5 gold badges65 silver badges68 bronze badges
asked Aug 4, 2017 at 16:02
JoshieWashieJoshieWashie
911 silver badge3 bronze badges
1
- Hi, would have liked to know how you figured this out if you did. – Neovea Commented Oct 17, 2017 at 7:28
2 Answers
Reset to default 3This works for me:
import React from 'react'
import { mount, shallow } from 'enzyme'
class Foo extends React.Component {
// babel transpiles this too Foo.prototype.canMock
protoMethod () {
// will be mocked
}
// this bees an instance property
instanceMethod = () => {
return 'NOT be mocked'
}
render () {
return (<div>{`${this.protoMethod()} ${this.instanceMethod()}`}</div>)
}
}
Foo.prototype.protoMethod = jest.fn().mockReturnValue('you shall')
it('should be mocked', () => {
const mock = jest.fn().mockReturnValue('be mocked')
const wrapper = mount(<Foo />)
wrapper.instance().instanceMethod = mock
wrapper.update()
expect(mock).toHaveBeenCalled()
})
Note however, that this fails when using shallow
instead of mount.
You are not missing anything.
Jest can only mock the structure of objects that are present at require time. It does it by reflection (not by analysis), which means that properties that get added by the constructor cannot be mocked. It's important to understand though that a fat-arrow assignment in a class in JS is not a class method; it's a class property holding a reference to a function.
https://github./facebook/jest/issues/6065