React, Enzyme：测试状态更新功能组件

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
});

从视觉上看，这按预期工作。

关于在测试中看到状态正确更新，我缺少什么？

我的猜测是，一旦我弄清楚这一点，我就可以将相同的逻辑应用于事物的禁用方面。

提前致谢

这里是沙盒：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，您需要在触发事件后重新找到您的组件，因为它的属性不会更新 (reference)。

作为进一步检查，只需在模拟点击事件之前记录包装器：

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()