未被模拟的方法的开玩笑测试调用

Question

我有一个 React 组件 MyComponent，我想在其中测试当用户旋转 phone.

时应触发的行为

组件内部：

export class MyComponent extends React.PureComponent<props> {
  componentDidMount() {
    window.addEventListener('orientationchange', this.onRotation)
  }
  componentWillUnmount() {
    window.removeEventListener('orientationchange', this.onRotation)
  }

  onRotation = () => {
    // do things
  }

  render() {
    // ...
  }
}

我在媒体上找到了一篇描述如何为此 here 编写测试的文章。但是，这对我不起作用。

describe('<MyComponent />', () => {
  it('does things on rotation', () => {
    const map : any = {}
    window.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    })

    const wrapper : any = mount(<MyComponent />)
    map.orientationchange()

    expect(wrapper.onRotation).toHaveBeenCalled()
  })
})

在这篇文章中这是有效的，但是我收到一个错误：

"Matcher error: received value must be a mock or spy function
Received has value: undefined"

使用间谍也行不通：

it('does things on rotation', () => {
    const map : any = {}
    window.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    })

    const wrapper : any = mount(<MyComponent />)
    const spy = jest.spyOn(wrapper.instance(), 'onRotation')

    map.orientationchange()
    expect(spy).toHaveBeenCalled()
})

它说：

"Expected mock function to have been called, but it was not called."

Answer 1

监视 onRotation 中的函数。

import React from 'react';

class OrientationChange extends React.Component {
    componentDidMount() {
      window.addEventListener('orientationchange', this.onRotation)
    }
    componentWillUnmount() {
      window.removeEventListener('orientationchange', this.onRotation)
    }
    handleRotation = () => {
      console.log('inside handle rotation');
    }

    onRotation = (event) => {
      this.handleRotation()
    }

    render() {
        return (
          <div>Testing</div>
        )
    }
}

export default OrientationChange;

describe('<OrientationChange /> orientation change test', () => {
  it('does things on rotation', () => {
    const map = {}
    window.addEventListener = jest.fn((event, cb) => {
      map[event] = cb;
    })

    const wrapper = mount(<OrientationChange />)

    const spy = jest.spyOn(wrapper.instance(), 'handleRotation')
    map.orientationchange();

    expect(spy).toHaveBeenCalled()
  })
})

未被模拟的方法的开玩笑测试调用

jest test call of method that is not mocked

javascript

unit-testing

reactjs

ts-jest