Как найти компонент React внутри элемента с определенным классом, используя фермент?

Question

Я пытаюсь протестировать компонент React, используя Jest и Enzyme. Я хочу смоделировать событие click для компонента Button, который находится внутри элемента div с определенным именем класса. Я не могу получить узел Button.

В моем компоненте есть следующая разметка

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

Чтобы сделать это более конкретным, вы всегда можете добавить класс к кнопке.

Или за документацию , если вы хотите, вы можете нацелить его, введя компонент в тест и затем найдя его таким образом:

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

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

Наконец, без каких-либо дополнительных импортов вы можете использовать отображаемое имя компонента следующим образом:

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