如何使用酶在特定类别的元素内找到React组件? [英] How to find a React component inside an element with specific class using enzyme?

问题描述

我正在尝试使用Jest和Enzyme测试React组件.我想在具有特定类名的div内的Button组件上模拟click事件.我找不到按钮节点.

I am trying to test a React component using Jest and Enzyme. I want to simulate a click event on a Button component which is inside a div with a specific class name. I can't retrieve the Button node.

我在组件中具有以下标记

I have the following markup in my component

<div className="settings">
    <Button
        onClick={() => this.toggleSettingsModal(true)}
        buttonStyle={ButtonStyle.Primary}>
        Settings
    </Button>
</div>

我尝试过

const component = shallow(<MyComponent />);
component.find(".settings[Button]").simulate("click");

我希望找到Button组件，但是得到 0 个节点.

I expect to find the Button component, but I get 0 nodes.

推荐答案

尝试下面的代码

import { shallow } from 'enzyme'
import MyComponent from './MyComponent'

describe('<MyComponent />', () => {
    it('simulates click events', () => {
        const component = shallow(<MyComponent />);
        component.find(Button).simulate("click");
    });
});

编辑尝试以下代码:

expect(component
        .find(Button)
        .closest('.settings'))
        .simulate("click");

这篇关于如何使用酶在特定类别的元素内找到React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！