8

鉴于下面的组件和测试，为什么我的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();
  ...
}
4

2 回答 2

2

这对我有用：

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 时，这会失败。

于 2017-11-25T09:30:18.187 回答
1

你没有错过任何东西。

Jest 只能模拟在需要时出现的对象的结构。它通过反射（而不是通过分析）来实现，这意味着不能模拟构造函数添加的属性。尽管 JS 类中的粗箭头赋值不是类方法，但理解这一点很重要。它是一个类属性，包含对函数的引用。

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

于 2019-07-22T11:27:05.903 回答