Question

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

我在组件中具有以下标记

<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节点。

Answer 1

尝试下面的代码

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");

Answer 2

元素的类型不是Button，即组件名称。它可能是button或input。您可以根据节点的元素类型来做到这一点：

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

要使其更加具体，您可以始终向按钮添加一个类。

或者，per the documentation，如果您愿意，可以通过将组件输入到测试中然后以这种方式找到它来定位它：

import Bar from '../components/Foo';

const wrapper = shallow(<MyComponent />);
wrapper.find(Bar).simulate("click");

最后，无需任何其他导入，您可以使用组件的显示名称，如下所示：

const baz = shallow(<MyComponent />);
baz.find('Button').simulate("click");

如何使用酶在特定类别的元素内找到React组件？

2 个答案: