Question

我想测试在'mousedown'事件上调用了一个类方法。请看下面的代码。

这是我的组件：

Dim Ctrl As Control

With UF_DataEntry.ActiveControl
    If Not IsNumeric(.Value) And .Value <> vbNullString Or UF_DataEntry.ActiveControl.Value = vbNullString Then
        MsgBox "Input must be a number and can not be blank"
        '.Value = vbNullString
        If Ctrl.Name = "DE_Text_Term" Then
            Ctrl.Value = 36
                Else: UF_DataEntry.ActiveControl.Value = 0
        End If
    End If
End With

这是我的考验：

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

因此，我最终希望测试能够通过，但是跑步者返回失败，并显示消息

预期已调用模拟函数，但未调用。

我在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

如何修复Jest中的“预期的模拟函数已被调用，但未被调用”

1 个答案: