Реагируйте, Фермент: Тестирование функционального компонента обновления состояния

Question

Я пытаюсь понять, как правильно инициировать обновление состояния, которое можно проверить. По сути, у меня есть 2 случая, которые я пытаюсь проверить, которые относятся исключительно к визуальному состоянию кнопки.

1) проверить, что кнопка визуально становится выбранной 2) проверить, что кнопка визуально становится отключенной

Приложение

 export default function App() {
 const [selected, setSelected] = useState(false);

 return (
  <div className="App">
    <h1>Testing Style Update</h1>
    <Button
      className={`buttonBase ${selected && "buttonSelected"}`}
      clicked={() => setSelected(!selected)}
      selected={selected}
    />
  </div>
  );
}

кнопка

const Button = ({ className, selected, clicked }) => (
  <button className={className} onClick={clicked}>
    {selected
      ? "Click me to Remove the new style"
      : "Click me to add a new style"}
  </button>
);
export default Button;

тест

import React from "react";
import App from "./App";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Button from "./Button";

Enzyme.configure({ adapter: new Adapter() });

describe("App", () => {
  it("renders", () => {
    mount(<App />);
});

it("button visually becomes selected when clicked", () => {
const wrapper = mount(<App />);

const btn = wrapper.find(Button);
expect(btn).toBeDefined(); // <- passes
expect(btn.hasClass("buttonSelected")).toEqual(false); // <- passes

btn.simulate("click");
wrapper.update();
expect(btn.hasClass("buttonSelected")).toEqual(true);// <- fails
});

Визуально это работает, как и ожидалось.

Чего мне не хватает в отношении правильного обновления состояния в тесте?

Я предполагаю, что, как только я это выясню, я смогу применить те же логики c к неработающей стороне вещей.

Заранее спасибо

Вот песочница: https://codesandbox.io/s/testingreactusestate-3bvv7

ОБНОВЛЕНИЕ: На основе первого при условии ответа, я смог пройти тест в своей песочнице, но не в своей среде разработки.

Возможно, что Material-UI вызывает некоторые расхождения, но я знаю имя класса, которое ищу :

Вот тест разработчика

it("Updates it's classes when selected", () => {
  wrapper = mount(
       <ul>// required because the FilterListItem is an 'li' element
        <FilterListItem/>
      </ul>
  );

  let btn = wrapper.find(Button);
  expect(btn).toBeDefined(); // <- PASS
  // verify that the correct style is not present
  expect(btn.hasClass("makeStyles-selected-5")).toEqual(false);// <- PASS

  btn.simulate("click");

  // re-find the node
  btn = wrapper.find(Button);
  expect(btn).toBeDefined(); // <- PASS
  // check that the correct style has now been added
  expect(btn.hasClass("makeStyles-selected-5")).toEqual(true);//<-FAIL
});

Answer 1

Ваш тест имеет смысл, единственное, что вы пропустили, это то, что с ферментом 3 вам нужно повторно найти ваш компонент после запуска события, потому что его свойства не будут обновлены ( ссылка ).

В качестве дополнительной проверки, просто зарегистрируйте оболочку перед симуляцией события щелчка:

btn.simulate("click");
console.log(wrapper.find(Button).debug()); // re-find Button 
console.log(btn.debug()); // your code using btn

будет иметь значение

<Button className="buttonBase buttonSelected"...
<Button className="buttonBase false"... 

Таким образом, как вы видите, компонент был правильно обновлен после click. Проблема только в том, чтобы заново найти компонент, который нужно протестировать.

БОНУС: вам не нужно update()