测试结果 - className 未更新答案

【问题标题】：Test result - className not updated测试结果 - className 未更新
【发布时间】：2020-12-19 22:49:25
【问题描述】：

我在 React（Jest、Enzyme）中进行单元测试。我希望#mail 在输入更改时具有类'solutions__mail-input'，但事实并非如此。代码：

inputEmail.simulate("change", {
      target: { value: "test@test.com", name: "mail" },
    });

然后：

expect(solutions.find("#mail").hasClass("solutions__mail-input")).toEqual(
      true
    );

而且没有绿化，输入的值变了，改class的逻辑也不错。

测试：



  it("test valid mail", () => {
    const solutions = shallow(<Solutions />);
    const inputEmail = solutions.find("#mail");
    inputEmail.simulate("change", {
      target: { value: "test@test.com", name: "mail" },
    });
    expect(solutions.find("#mail").props().value).toBe("test@test.com");
    expect(solutions.find("#mail").hasClass("solutions__mail-input")).toEqual(
      true
    );
  });

组件：

      <input
        type="text"
        placeholder="Email"
        value={mail}
        id="mail"
        name="mail"
        className={`solutions__mail-input${!readyToSend ? "--invalid" : ""}`}
        onChange={(e) => {
          changeMail(e.target.value);
          validateMail();
        }}
      />

【问题讨论】：

标签： reactjs unit-testing enzyme

【解决方案1】：

除了readyToSend 值之外，您所做的一切都是正确的。由于input className 依赖于它，所以你必须先验证它的值。

我已尝试以下代码，readyToSend 为 true，并且单元测试通过了。

function MyComponent() {

  const [readyToSend, setReadyToSend] = useState(true);
  const [mail, setMail] = useState('');

  const changeMail = (value) => {
    setMail(value);
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Email"
        value={mail}
        id="mail"
        name="mail"
        className={`solutions__mail-input${!readyToSend ? "--invalid" : ""}`}
        onChange={(e) => {
          changeMail(e.target.value);
          // validateMail();
        }}
      />
    </div>
  );
}

如果您不想验证 readyToSend 的值，请使用以下语句。

  expect(solutions.find("#mail").props().className.includes("solutions__mail-input"))
 .toEqual(true);

【讨论】：

【解决方案2】：

我不知道您如何更改 readyToSend 的值，但我可以建议的是，因为只有当 readyToSend 为真时您才会获得 "solutions__mail-input"，所以在测试时您需要确保readyToSend 正在更改为 true。

【讨论】：