Как исправить 'Ожидаемая ложная функция, которая была вызвана, но она не была вызвана' в Jest

Question

Я хочу проверить, что метод класса вызывается для события 'mousedown'. Пожалуйста, взгляните на код ниже.

Это мой компонент:

import React, { Component } from 'react';
import styled from 'styled-components';

import MyChildClass from './MyChildClass';


export default class MyClass extends Component {

constructor(props) {
    super(props);

    // Init state
    this.state = {
      balls: []
    };

    this.onMouseUpHandler = this.onMouseUpHandler.bind(this, this.state.balls);
  }

onMouseDownHandler = (balls, e) => {
    ...
  };

render() {

    return (
      <StyledEnvironment className='wrapper'>
        <div
          onMouseDown={this.onMouseDownHandler}
          onMouseUp={this.onMouseUpHandler}
        >
          {balls}
        </div>
      </StyledEnvironment>
    );
  }

И это мой тест:

import React from 'react';
import { mount, shallow } from 'enzyme';

import MyClass from '../MyClass';

it('should call onMouseDownHandler on mouse down', () => {
    //...arrange
    const instance = component.instance();
    const wrapper = component.find('.wrapper').at(0);
    instance.setMousePosition = jest.fn();
    instance.onMouseDownHandler = jest.fn();
    instance.forceUpdate();
    component.update();
    //...act
    wrapper.simulate('mouseDown');
    //...assert
    expect(instance.onMouseDownHandler).toHaveBeenCalled();
  });

Итак, я в конечном итоге ожидаютест пройден, но бегун все равно возвращает ошибку, с сообщением

Ожидается, что была вызвана фиктивная функция, но она не была вызвана.

Я прошелмного примеров в Google, и обнаружил, что это правильная схема тестирования событий.

Answer 1

Использовать функцию стрелки как метод класса нелегко проверить. Потому что он будет использоваться как свойство класса, а не как метод экземпляра класса. Поэтому я предлагаю вам рефакторизовать метод.

После рефакторинга вы можете использовать jest.spyOn (object, methodName) , чтобы шпионить за методом onMouseDownHandler.

Например,

index.tsx:

import React, { Component } from 'react';

const StyledEnvironment = ({ children, className }) => <div className={className}>{children}</div>;

export default class MyClass extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      balls: []
    };
  }

  onMouseDownHandler(balls, e) {
    // TBD
  }
  onMouseUpHandler(balls, e) {
    // TBD
  }

  render() {
    return (
      <StyledEnvironment className="wrapper">
        <div
          onMouseDown={e => this.onMouseDownHandler(this.state.balls, e)}
          onMouseUp={e => this.onMouseUpHandler(this.state.balls, e)}>
          {this.state.balls}
        </div>
      </StyledEnvironment>
    );
  }
}

index.spec.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import MyClass from './';

describe('MyClass', () => {
  test('should handle mousedown event', () => {
    const wrapper = shallow(<MyClass></MyClass>);
    const onMouseDownHandlerSpy = jest.spyOn(MyClass.prototype, 'onMouseDownHandler');
    wrapper.find('div').simulate('mouseDown');
    expect(onMouseDownHandlerSpy).toBeCalled();
  });
});

Результат модульного теста с отчетом о покрытии:

 PASS  src/stackoverflow/58652312/index.spec.tsx
  MyClass
    ✓ should handle mousedown event (12ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |    76.47 |      100 |     62.5 |    91.67 |                   |
 index.tsx |    76.47 |      100 |     62.5 |    91.67 |                25 |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.951s, estimated 9s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58652312