тестирование выбранного элемента в реакции с Jest

Question

Я пытаюсь проверить функциональность элемента select в компоненте React.

Примечание: это не дубликат этого вопроса , потому что я не использую фермент, а скорее пытаюсь сделать что-то, просто используя act() из React's Test Utilities и выполнение тестов с Jest .

Учитывая компонент с элементом select, подобным этому:

class TestSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            choice: "apples",
        };
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({choice: event.target.value});
    }
    render() {
        return (
            <div>
                <select value={this.state.choice} onChange={this.handleChange}>
                    <option value="apples">apples</option>
                    <option value="oranges">oranges</option>
                </select>
                <h4>You like {this.state.choice}</h4>
            </div>
        );
    }
}

Я хотел бы иметь возможность протестируйте это следующим образом:

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

test("Should change preference", () => {
    act(() => {
        render(<TestSelect/>, container);
    });
    let message = container.querySelector("h4");
    expect(message.innerHTML).toContain("apples");
    const selectElement = container.querySelector("select");
    act(() => {
        selectElement.dispatchEvent(new Event("change"), {
            target: { value: "oranges"},
            bubbles: true,
        });
    });
    message = container.querySelector("h4");
    // Test fails here: Value does not change
    expect(message.innerHTML).toContain("oranges");
});

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

Answer 1

Я предлагаю вам использовать userEvent из библиотеки React Testing.

Это очень просто и удобно в использовании. Вот приведенный пример:

import React from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("select values", () => {
    const { getByTestId } = render(
        <select multiple data-testid="select-multiple">
            <option data-testid="val1" value="1">
                1
            </option>
            <option data-testid="val2" value="2">
                2
            </option>
            <option data-testid="val3" value="3">
                3
            </option>
        </select>
    );

    userEvent.selectOptions(getByTestId("select-multiple"), ["1", "3"]);

    expect(getByTestId("val1").selected).toBe(true);
    expect(getByTestId("val2").selected).toBe(false);
    expect(getByTestId("val3").selected).toBe(true);
});

Answer 2

Я нашел способ сделать это, используя Simulate из response-dom test-utils .

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act, Simulate } from "react-dom/test-utils";

test("Should change preference", () => {
    act(() => {
        render(<TestSelect/>, container);
    });
    let message = container.querySelector("h4");
    expect(message.innerHTML).toContain("apples");
    const selectElement = container.querySelector("select");
    act(() => {
        Simulate.change(selectElement, { target: { value: "oranges" }});
    });
    message = container.querySelector("h4");
    expect(message.innerHTML).toContain("oranges");
});