文章/答案/技术大牛

发布

社区首页 >问答首页 >测试结果- className未更新

问测试结果- className未更新
EN

Stack Overflow用户

提问于 2020-12-19 19:21:49

回答 2查看 114关注 0票数 1

我在React (Jest，酶)中进行单元测试。当输入更改时，我希望#mail有类'solutions__mail- input '，但它没有。代码：

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

然后：

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

而且它不是绿色的，输入值是改变的，改变类的逻辑也是好的。

测试：

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

enzyme

reactjs

unit-testing

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-19 22:42:05

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

票数 0

Stack Overflow用户

发布于 2020-12-19 19:29:32

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65369268

复制

相似问题

问测试结果- className未更新
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问测试结果- className未更新EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问测试结果- className未更新
EN