Question

我编写了一个测试用例来调用onBlur方法，但是在尝试声明该方法时遇到错误。这是上面的测试用例。

it("call the handlingBlurEmail method", () => {
    const wrapper = mount(
      <App childRef={() => {}} />
    );
    const comp = wrapper.find({ id: "email" }).first();
    comp.prop("onBlur")({
      target: { id: "email", value: "test@gmail.com" }
    });

    expect(
      wrapper
        .find("AccountForm")
        .state()
        .onBlur()
    ).toHaveBeenCalled();
  });

而我编写测试用例的功能是

  mailReference = React.createRef();
  handlingEmailBlur = events => {
    this.mailReference.current.validate(events.target.value);
  };

  render = () {
  ......

    return (
      <div className="Form1">

        onBlur={this.handlingEmailBlur}
      </div>
    )
    .....
    }

请让我知道如何添加断言语句，以便在上述测试案例中调用onBlur()方法

Answer 1

这是单元测试解决方案：

index.tsx：

import React, { Component } from 'react';

class App extends Component {
  mailReference = React.createRef();
  handlingEmailBlur = (events) => {
    this.mailReference.current.validate(events.target.value);
  };

  render() {
    return (
      <div className="Form1" onBlur={this.handlingEmailBlur}>
        some component
      </div>
    );
  }
}

export default App;

index.spec.tsx：

import App from './index';
import { mount } from 'enzyme';
import React from 'react';

describe('59455504', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  it('call the handlingBlurEmail method', () => {
    const mailReference = { current: { validate: jest.fn() } };
    jest.spyOn(React, 'createRef').mockReturnValue(mailReference);
    const wrapper = mount(<App childRef={() => {}} />);
    const mEvent = {
      target: { id: 'email', value: 'test@gmail.com' },
    };
    wrapper.find('.Form1').prop('onBlur')(mEvent);
    expect(mailReference.current.validate).toBeCalledWith(mEvent.target.value);
  });
});

覆盖率100％的单元测试结果：

 PASS  src/stackoverflow/59455504/index.spec.jsx (8.328s)
  59455504
    ✓ call the handlingBlurEmail method (40ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.jsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.769s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59455504

在功能组件中断言onBlur（）函数

1 个答案: