测试结果 - className 未更新

Question

我正在 React（Jest、Enzyme）中进行单元测试。我希望 #mail 在输入更改时有 class '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();
        }}
      />

Answer 1

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

Answer 2

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

测试结果 - className 未更新

Test result - className not updated

unit-testing

reactjs

enzyme