#reactjs #jestjs #material-ui #enzyme
#reactjs #jestjs #материал-пользовательский интерфейс #enzyme
Вопрос:
Я использовал RadioGroup из material UI и хочу написать тестовый код с помощью jest и enzyme вот мой код:
import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
const ThemeColorSwitcher = ({setDarkState,theme: { _theme, _light, _dark }}) => {
const handleChange = (event) => {
setDarkState(event.target.value);
};
return (
<FormControl component="fieldset">
<FormLabel component="legend">{_theme}</FormLabel>
<RadioGroup
aria-label="theme"
name="theme1"
value={darkState}
onChange={handleChange} >
<FormControlLabel value="false" control={<Radio />} label={_light} />
<FormControlLabel value="true" control={<Radio />} label={_dark} />
</RadioGroup>
</FormControl>
);
};
export default ThemeColorSwitcher;
и это мой тест, но я не могу найти реквизиты, чтобы проверить, нажата ли радиостанция или нет?
import React from "react";
import ThemeColorSwitcher from "./ThemeColorSwitcher";
import FormControl from "@material-ui/core/FormControl";
import Radio from "@material-ui/core/Radio";
import {
createMount,
createShallow,
createRender,
} from "@material-ui/core/test-utils";
describe("<ThemeColorSwitcher />", () => {
it("simulates click on radio", () => {
const mount = createMount();
const wrapper = mount(<ThemeColorSwitcher />);
const radio = wrapper.find(Radio).last();
radio.simulate("click");
expect(radio.props().checked).toBe(true);
});
});
Любая помощь будет оценена.
Ответ №1:
В этом случае нам нужно запустить событие onChange. Для этого вы можете запустить следующий код.
const event = {
target: { value: 'true' }
} as React.ChangeEvent<HTMLInputElement>;
wrapper.find(RadioGroup).props().onChange(event, 'true');
Это вызовет событие onChange и изменит значение.