javascript - Jest - mock fat arrow function within React component - Stack Overflow

admin管理员组

文章数量:1315241

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();
  ...
}

• javascript
• reactjs
• jestjs
• babel-jest

Share Improve this question Follow edited Dec 15, 2017 at 20:19 doelleri 19.7k55 gold badges6565 silver badges6868 bronze badges asked Aug 4, 2017 at 16:02 JoshieWashieJoshieWashie 9111 silver badge33 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This 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

本文标签： javascriptJestmock fat arrow function within React componentStack Overflow