Reactjs 反应，酶：测试状态更新功能组件

我正在努力理解如何正确触发可以验证的状态更新。基本上，我有两个案例要测试，它们仅仅与按钮的视觉状态有关

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

从视觉上看，这是可以预期的

关于在测试中正确更新状态，我遗漏了什么

我的猜测是，一旦我能弄明白这一点，我就能够将同样的逻辑应用于事物的残疾方面

提前谢谢

这是沙箱：

更新： 根据提供的第一个答案，我能够在我的沙箱中通过测试，但不能在我的开发环境中通过测试

可能是材质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
});

---

您的测试是正确的，您唯一遗漏的是，使用Ezyme 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"... 

因此，正如您所看到的，在单击后组件已正确更新。问题只是重新找到需要测试的组件

---

额外好处：您不需要更新

，因此在我的试用中，我的原始版本让我想到了以下内容：expect getComputedStylewrapper.findButton.getDOMNode.getPropertyValue background color.toBetransparent；这很好，更符合我的测试。但是当我做同样的事情来检查背景颜色是否改变时，它仍然失败。这实际上不是在重新查找组件吗？注意：我做了以下操作：期望getComputedStylewrapper.findButton.getDOMNode.getPropertyValue背景色。toBewhite；在模拟点击之后，just Fyi用新材料更新了我的问题。您会更新沙箱还是显示如何在组件中设置这个新的makeStyles-selected-5类？同样对于调试，您是否在模拟单击事件之后尝试过console.logwrapper.debug？更新：我将把这作为接受的答案，因为我意识到生产代码中的按钮是通过useEffect而不是onclick获取其状态的，谢谢您的帮助！