Question

鉴于我的组件和测试如下，为什么我的confirmClickHandler方法在我运行测试时仍会被调用？

注意：我注意到当我将方法从胖箭头函数更改为常规函数时，它会被正确地模拟出来。我在这里缺少什么？

class CalendarConfirmation extends React.Component {
  ...

  confirmClickHandler = (e) =>  {
  ...
  }
}

和我的测试：

import React from 'react';
import {mount} from 'enzyme';
import CalendarConfirmation from '../components/CalendarConfirmation';

describe('Test CalendarConfirmation', () => {
  let calendarConfirmation;
  calendarConfirmation = mount (<CalendarConfirmation />);
  calendarConfirmation.instance().confirmClickHandler = jest.fn();
  ...
}

Answer 1

这对我有用：

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 becomes 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()
})

但请注意，使用shallow而不是mount时会失败。

Answer 2

您什么都不丢失。

玩笑只能模拟存在于以下对象的结构需要时间。它是通过反射（而不是通过分析）完成的，这意味着构造函数添加的属性不能被模拟。重要的是要了解 JS中的class不是类方法；这是一个拥有函数引用。

https://github.com/facebook/jest/issues/6065

Jest - React组件中的模拟胖箭头函数

2 个答案: