Question

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

Toggle.jsx

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

toggle.test.js

{{1}}

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

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

由于

Answer 1

您应该考虑编写此测试的一些细节。

模拟事件

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

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

使用浅渲染模拟事件

模拟事件 浅呈现，不按预期传播。因此，至少有两个选项：

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

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

1 个答案:

模拟事件

使用浅渲染模拟事件