Имитация события выбора с помощью Enzyme - PullRequest
Новая
       27

Имитация события выбора с помощью Enzyme

0 голосов
/ 13 февраля 2020

Я немного сбит с толку, потому что это кажется такой тривиальной и простой вещью, но в Enzyme вряд ли есть какая-либо надлежащая документация о том, как это сделать.

Я хочу сделать одну из самых простых вещей в мире. Я просто хочу смоделировать событие select в выпадающем списке select (HTML select / combo), выбрав опцию под названием «dogs».

Когда у меня выбрана эта опция, хотелось бы видеть, что опция "selected", и я также хотел бы видеть, что значение select установлено в значение "dogs".

Что я здесь не так делаю? 

import React from 'react';
import {shallow, mount} from "enzyme"

    test(' change  ', () => {
        let Compoment =
            <select className="sel" name="selectComp" required="">
                <option value="empty">Please make your choice ...</option>
                <option value="cats">feline</option>
                <option value="dogs">canine</option>
            </select>;

        const wrapper = mount(Compoment);

        let sel = wrapper.find(".sel").at(0)
        sel.simulate('change', { target: { name: 'selectComp', value: "dogs" } });

        expect(wrapper.find(".sel").at(0).getElement().value).toBe("dogs")
        expect(wrapper.find(".sel").at(0).find("option").at(2).props().selected).toBe(true)
    })

1 Ответ

1 голос
/ 16 февраля 2020

React syncs prop => свойство DOM только одним способом.

Если вы установите selected prop для <option> элемента React, он запишет его в свойство DOM selected (но вы на самом деле не используете selected поддержать вообще).

Ваш браузер (или JSDOM в случае Jest-тестов) также изменяет свойство selected для соответствующего элемента <option> при выборе пользователя.

Так вот почему prop не отражает изменения.

Вы можете использовать getDOMNode для доступа к базовому узлу DOM: 

expect(wrapper.find(".sel").at(0).find("option").at(2).getDOMNode().selected).toBe(true)

, но знаете что? тебе это не нужно. Это будет просто проверять правильную опцию браузера при выборе пользователя. Это просто потраченное время, чтобы проверить, выполняют ли браузер и / или React свою работу ответственно.

...