单击标签时测试输入元素单击调用

Posted 2021-04-20

我想测试一个场景，在单击标签时调用输入组件（无线电/复选框）单击事件。以下是我的代码，

Toggle.jsx

import * as React from 'react'; // eslint-disable-line import/no-extraneous-dependencies
import styled from 'styled-components'; // eslint-disable-line import/no-extraneous-dependencies

import Label from '../Label/Label';

const ToggleButtonController = styled.button`
  background-color: red;
`;

const ToggleInputController = styled.input`
  background-color: red;
`;

const Toggle = (props) => {
  const { label } = props;

  let toggleControllerRef = null;

  const renderLabel = () => {
    return (
      <Label
        onClick={() => { toggleControllerRef.click(); }} // <--- untested line where I invoke the input element click event on label click
      >
        { label }
      </Label>
    );
  };


  const renderController = () => {
    const { labelPosition, disabled, type, onClick, onChange } = props;

    let controller = (
      <div>
        <ToggleInputController
          onClick={onClick}
          onChange={onChange}
          innerRef={(toggleController) => { toggleControllerRef = toggleController; }}
          type={type === 'switch' ? 'checkbox' : type}
          disabled={disabled}
        />
      </div>
    );

    if (type === 'button') {
      controller = (
        <div>
          <ToggleButtonController
            onClick={onClick}
            disabled={disabled}
            {...commonUtils.filterProps(Toggle.propTypes, props)}
          >
            { label }
          </ToggleButtonController>{ renderRequired() }
        </div>
      );
    }

    return controller;
  };

  return (
    <div>
      {
        renderController()
      }
    </div>
  );
};

export default Toggle;

toggle.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { Toggle } from '../src/index';

describe('Test Toggle component', () => {
  it('Test checkbox element label click event', () => {
    const mockCallBack = jest.fn();
    const toggle = shallow(<Toggle type="checkbox" onClick={mockCallBack} label="test" />);

    toggle.find('Label').last().get(0).click; // i want to trigger onClick in the above Toggle when the label is clicked

    expect(mockCallBack).toHaveBeenCalled();
  }); 
}); 

使用此代码段，测试失败，说明未调用mockCallBack。

这是我第一次测试UI元素，并希望在正确的方向上有一个点来实现这个要求。

谢谢

答案

编写此测试时应考虑几个细节。

模拟事件

为了模拟事件，酶包装提供.simulate方法：

wrapper.find('a').simulate('click');

使用浅渲染模拟事件

具有浅渲染的模拟事件不会按预期传播。因此至少有两种选择：

• 继续使用浅渲染并直接在绑定到事件回调的元素上调用.simulate
• 切换到Enzyme的full rendering以利用正确的事件传播