javascript - onBlur 未在 Jest 测试用例、React App 中调用

Question

我有一个组件，我在其中为 input type=text 编写了 onBlur 和 onChange 事件处理程序。

<input type="text" onBlur={ this.fetchProspectIdDetails } onChange={ this.handleProspectIdChange } name="prospectId" value={this.state.prospectId}></input>

当我尝试为 onchange 编写测试用例时，它起作用了

it('Testing empty Salesforce Id Check', () => { 
  wrapper.find('input[name="prospectId"]')
         .simulate('change', {target: {name: 'prospectId', value: ''}});
  expect(wrapper.state('validSalesForceId')).toEqual(false);
});

但是 onBlur 函数，即 fetchProspectIdDetails 没有被调用

it('Testing the ProspectId State', () => {
    wrapper.find('input[name="prospectId"]')
           .simulate('blur', {target: {name: 'prospectId', value: '001G000000mIQIY'}});
    expect(wrapper.state('prospectId')).toEqual('001G000000mIQIY');
});

我做错了什么？

Answer 1

它工作正常。这是一个工作示例:

index.jsx:

import React, { Component } from 'react';

export class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      prospectId: 1,
      validSalesForceId: true,
    };
    this.fetchProspectIdDetails = this.fetchProspectIdDetails.bind(this);
    this.handleProspectIdChange = this.handleProspectIdChange.bind(this);
  }

  fetchProspectIdDetails(e) {
    console.log('onblur');
    this.setState({ prospectId: e.target.value });
  }
  handleProspectIdChange(e) {
    console.log('onchange');
    this.setState({ validSalesForceId: !!e.target.value });
  }

  render() {
    return (
      <input
        type="text"
        onBlur={this.fetchProspectIdDetails}
        onChange={this.handleProspectIdChange}
        name="prospectId"
        value={this.state.prospectId}
      ></input>
    );
  }
}

index.test.jsx:

import { shallow } from 'enzyme';
import React from 'react';
import { Example } from '.';

describe('53407041', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<Example></Example>);
  });
  it('Testing empty Salesforce Id Check', () => {
    wrapper.find('input[name="prospectId"]').simulate('change', { target: { name: 'prospectId', value: '' } });
    expect(wrapper.state('validSalesForceId')).toEqual(false);
  });

  it('Testing the ProspectId State', () => {
    wrapper
      .find('input[name="prospectId"]')
      .simulate('blur', { target: { name: 'prospectId', value: '001G000000mIQIY' } });
    expect(wrapper.state('prospectId')).toEqual('001G000000mIQIY');
  });
});

单元测试结果:

 PASS  examples/53407041/index.test.jsx
  53407041
    ✓ Testing empty Salesforce Id Check (59 ms)
    ✓ Testing the ProspectId State (2 ms)

  console.log
    onchange

      at Example.handleProspectIdChange (examples/53407041/index.jsx:19:13)

  console.log
    onblur

      at Example.fetchProspectIdDetails (examples/53407041/index.jsx:15:13)

-----------|---------|----------|---------|---------|-------------------
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:       2 passed, 2 total
Snapshots:   0 total
Time:        5.286 s

源代码:https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/53407041