как написать тест с ферментом для material ui Radio

#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 и изменит значение.