Как установить и проверить флажок пользовательского интерфейса материала в Enzyme / Jest Test - PullRequest
Новая
       9

Как установить и проверить флажок пользовательского интерфейса материала в Enzyme / Jest Test

1 голос
/ 30 апреля 2020

У меня есть простой компонент, обернутый вокруг флажка Material UI. Я сократил его до минимума. 

//@flow
import React from "react";
import { Checkbox } from "@material-ui/core";

function MyCheckboxComponent() {
  const [checkedState, setCheckedState] = React.useState(true);

  const handleChange = event => {
    setCheckedState(event.target.checked);
  };

  return <Checkbox checked={checkedState} onChange={handleChange} />;
}

export default MyCheckboxComponent;

Я просто хочу протестировать этот компонент, переключить значение флажка и проверить его. Я не могу пройти мой простой тест. Я в недоумении, почему. 

import React from "react";

import Enzyme, { mount } from "enzyme";
import { Checkbox } from "@material-ui/core";
import Adapter from "enzyme-adapter-react-16";

import MyCheckboxComponent from "./MyCheckboxComponent";
Enzyme.configure({ adapter: new Adapter() });

/** Interaction tests testing user interaction with PilzButton */
test("Toggle Checkbox test", () => {
  const wrapper = mount(<MyCheckboxComponent />);

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);

  checkBox.simulate('change', { target: { checked: true } });

  expect(checkBox.props().checked).toBe(true);
});

Должен checkBox.simulate('change', { target: { checked: true } }); работать и переключать значение Checkbox ??

То, что у меня есть, находится здесь на CodeSandbox ...

Edit toggle-material-ui-checkbox-jest

1 Ответ

1 голос
/ 30 апреля 2020

Новейшие версии фермента кэшируют результаты, полученные из find и других методов.

Вам необходимо повторно найти, а также использовать .update(), чтобы заставить sh состояния восстановить render. 

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);

  checkBox.simulate('change', { target: { checked: true } });

  wrapper.update();

  expect(wrapper.find(Checkbox).props().checked).toBe(true);

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

Вы должны сделать это вместо этого: 

  const checkBox = wrapper.find(Checkbox);
  expect(checkBox).toHaveLength(1);
  expect(checkBox.props().checked).toBe(true);

  checkBox.simulate('change', { target: { checked: false } });

  wrapper.update();

  expect(wrapper.find(Checkbox).props().checked).toBe(false);

Этот тест фактически доказывает, что onChange работает правильно.

...