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）。

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

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

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

1 个答案: