在反应功能组件上测试酶中的点击事件未通过

Question

我正在尝试编写一个测试，以测试我的按钮何时被单击，handleClick 函数将被调用，但我在测试的断言中一直收到错误消息。 这是 React 组件：

function Profile() {

    const [name, setName] = useState({
        firstName: '',
        lastName: ''
    });
    const [names, setNames] = useState([]);

    const handleClick = (e) => {
        e.preventDefault();
        names.push(name);
    }

    return ( 
       <form >
        <input 
          type = "text"
          value = {name.firstName}
          onChange = {
            e => setName({
                ...name,
                firstName: e.target.value
            })
        }/> 
        <input 
          type = "text"
          value = {name.lastName}
          onChange = {
            e => setName({
                ...name,
                lastName: e.target.value
            })
        }/> 
        <button onClick = {handleClick} > Add Name < /button> </form>
    )
}
export default Profile

这是测试：

it('test 1 - call handleClick spy', () => {
  const handleClick = sinon.spy();
  let wrapper = shallow(<Profile handleClick={handleClick}/>);  
  wrapper.find('button').simulate('click',{preventDefault:()=>{}});
  expect(handleClick.calledOnce).toBe(true); 
  }); 

Answer 1

点击事件不会触发你传入的模拟的handleClick方法，而是触发组件内部定义的handleClick方法。这就是为什么不调用模拟的 handleClick 方法的原因。

要判断是否调用了组件内部的handleClick方法，可以使用preventDefault等间接方法判断是否调用了preventDefault函数。

例如

index.jsx:

import React, { useState } from 'react';

function Profile() {
  const [name, setName] = useState({
    firstName: '',
    lastName: '',
  });
  const [names, setNames] = useState([]);

  const handleClick = (e) => {
    e.preventDefault();
    names.push(name);
  };

  return (
    <form>
      <input
        type="text"
        value={name.firstName}
        onChange={(e) =>
          setName({
            ...name,
            firstName: e.target.value,
          })
        }
      />
      <input
        type="text"
        value={name.lastName}
        onChange={(e) =>
          setName({
            ...name,
            lastName: e.target.value,
          })
        }
      />
      <button onClick={handleClick}> Add Name </button>{' '}
    </form>
  );
}
export default Profile;

index.test.jsx:

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

describe('62202833', () => {
  it('should pass', () => {
    const wrapper = shallow(<Profile></Profile>);
    const mEvent = { preventDefault: jest.fn() };
    wrapper.find('button').simulate('click', mEvent);
    expect(mEvent.preventDefault).toBeCalledTimes(1);
  });
});

单元测试结果：

 PASS  stackoverflow/62202833/index.test.jsx (13.273s)
  62202833
    ✓ should pass (12ms)

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