reactjs - 方法“props”意味着在 1 个节点上运行。找到了 0 个

问题描述

我正在处理测试用例：

当我运行单个测试用例时，它工作正常，但如果我为 2 个测试场景运行它的抛出错误。

我的 tsx 代码：

 const onPasswordChange = useCallback((e) => {
    setStatusAlert({});
    setModel({ ...model, "password": e.target.value });
    setPasswordError(null);
  }, [setStatusAlert, setModel, setPasswordError]);

    const showPasswordInput = useCallback((e) => {
    e.preventDefault();
    const emailIsEmpty = !model.email || model.email.length < 1;
    setDisplayPasswordInput(!emailIsEmpty);
    setEmailError(emailIsEmpty ? "Email is required" : null);
  }, [model, setDisplayPasswordInput, setEmailError]);

我的测试用例：

 describe("onPasswordChange", () => {
    it("sets password to new value", async () => {
      const expectedPassword = lorem.word();
      mockedHttpHelper.get.mockImplementationOnce(jest.fn((params: IGetParams) => params.onGetSuccess({ data: { externalTypes: [] } } as AxiosResponse)));

      await usingMount(
        LoginFormComponent(defaultModelWithEmail),
        async wrapper => {
          await setTimeoutPromise(() => {
            wrapper.find(LoginForm).find("LoginPasswordFormBody").invoke("onPasswordChange")({ target: { name: "password", value: expectedPassword } });

            expect(wrapper.find(LoginForm).find("LoginPasswordFormBody").prop("model")).toEqual(expect.objectContaining({ password: expectedPassword }));
          }, 100);
        }
      );
    });

    it("empties status alert", async () => {
      const expectedError = lorem.word();
      mockedHttpHelper.get.mockImplementationOnce(jest.fn((params: IGetParams) => params.onGetSuccess({ data: { externalTypes: [] } } as AxiosResponse)));
      await usingMount(
        <GrabStatusAlertContext>
          <LoginForm model={defaultModelWithEmail} />
        </GrabStatusAlertContext>,
        async wrapper => {
          await setTimeoutPromise(() => {

            statusAlertContext.setStatusAlert({ color: "danger", text: expectedError });

            expect(statusAlertContext.statusAlert).toEqual({ color: "danger", text: expectedError });
            wrapper.find(LoginForm).find("LoginPasswordFormBody").invoke("onPasswordChange")({ target: { name: "password", value: expectedError } });
            wrapper.update();
            expect(statusAlertContext.statusAlert).toEqual({});
          }, 100);
        }
      );
    });
    it("sets passwordError to null", async () => {
      const passwordRequired = lorem.word();
      mockedHttpHelper.get.mockImplementationOnce(jest.fn((params: IGetParams) => params.onGetSuccess({ data: { externalTypes: [] } } as AxiosResponse)));

      await usingMount(
        <GrabStatusAlertContext>
          <LoginForm model={defaultModelWithEmail} />
        </GrabStatusAlertContext>,
        async wrapper => {
          await setTimeoutPromise(() => {
            // trigger passwordError by submitting an empty input and verify passwordError is not null
            wrapper.find("form").simulate("submit");

            expect(wrapper.find(LoginForm).find("LoginPasswordFormBody").prop("passwordError")).toEqual("Password is required");
            wrapper.find(LoginForm).find(`input[type="password"]`).simulate("change", { target: { name: "password", value: passwordRequired } });
            wrapper.update();
            expect(wrapper.find(LoginForm).find("LoginPasswordFormBody").prop("passwordError")).toEqual(null);
          }, 100);
        }
      );
    });

  });

请帮助我以任何方式解决此问题。

标签： reactjsjestjs

reactjs - 方法“props”意味着在 1 个节点上运行。找到了 0 个

问题描述

解决方案

推荐阅读