Тестирование Radio Group визуальное изменение шутка и @ testing-library / реагировать - PullRequest
0 голосов
/ 30 октября 2019

Вопрос о @testing-library/react, если быть точным. Теперь я понимаю, что эта библиотека не позволяет тестировать детали реализации, и, следовательно, состояние компонента - неправильный способ сделать это.

Ниже приведено использование радиогруппы. Теперь после нажатия RadioGroup.Button меняется только визуальный вид кнопки. Я управляю этим через переменную состояния selectedValue

test("click works", done => {
    const { getByTestId } = render(
        <RadioGroup data-testid="radio-test" value="item-4" onChange={(val) => {
                done();
            }}>
            <RadioGroup.Button value="item-1">Item 1</RadioGroup.Button>
            <RadioGroup.Button value="item-2">Item 2</RadioGroup.Button>
            <RadioGroup.Button value="item-3">Item 3</RadioGroup.Button>
            <RadioGroup.Button value="item-4">Item 4</RadioGroup.Button>
        </RadioGroup>
    );
    const component = getByTestId("radio-test");
    fireEvent.click(component.getElementsByTagName("label")[0]);
    expect(component.state.selectedValue).toBe("item-1");
});

Учитывая вышеупомянутую попытку проверить щелчок, как я могу проверить, правильно ли работает мой onChange?

expect(component.state.selectedValue).toBe("item-1");

Вышеприведенная строка явно не является правильным способом достижения этого. Другой возможный способ - проверить имя класса на то же самое. Но проблема в том, что мне не нужно имя класса только для тестирования, если я могу выполнить эту условную работу через переменные состояния и подпорки в styleled-компонентах для реального функционального компонента.

Итак, как я могупротестируйте selectedValue внутри моего компонента RadioGroup после нажатия кнопки, т. е. чтобы убедиться, что опора value на RadioGroup.Button соответствует selectedValue

Излишне говорить, что документы не помогли. Большинство онлайн-ресурсов указывают на проверку expect().toHaveTextContent() или чего-либо, что изменило визуализированный элемент после операции. Но у меня нет такого случая, и мой тест мог бы легко закончиться, если бы я мог проверить новое изменение реквизита или состояние. В конце концов, после изменения клика меняются только свойства CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...