Вопрос о @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.