如何开玩笑地改变钩子状态的值？答案

【问题标题】：How to change value of hook state in jest?如何开玩笑地改变钩子状态的值？
【发布时间】：2021-12-10 23:59:17
【问题描述】：

我是开玩笑的新手。我试图开玩笑地改变钩子状态。但我找不到任何实现相同的文档。以下是我在登录屏幕中的钩子状态。

const [form, setForm] = React.useState({
    email: "",
    phoneNumber: "",
    password: "",
    signUpType: SignUpType.PHONE_NUMBER,
  });

我想在测试时将signUpType的状态更改为EMAIL。如何实现？我做了以下

it("Email validation", () => {
    const email = "sample.s@abc.com";
    // Stub the initial state
    const stubInitialState = [{ signUpTyp: "EMAIL" }];
    React.useState = jest.fn().mockReturnValue([stubInitialState, {}]);

    const tree = mount(
      <Provider store={configureStore}>
        <SignIn />
      </Provider>
    );
    expect(tree.find('CustomTextInput[attrName="email"]').prop("value")).toBe(
      ""
    );
    expect(email).toMatch(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/);
  });

但上面的代码对我不起作用。请帮我找到解决方案。另外，TextInput 将是 email 或 phoneNumebr，具体取决于用户选择。

【问题讨论】：

用户如何将注册类型切换为电子邮件？请注意，您真的不应该模拟 React 的 API。
是不是因为stubInitialState 有signUpTyp 而不是signUpType？
@Donut 抱歉，这是一个错字。但它也不起作用。收到此错误Method “props” is meant to be run on 1 node. 0 found instead。因为初始状态将是 PHONE_NUMBER 所以 attrName 和 email 将是 undefined ，这就是我试图更改状态值的原因。请帮助。
我不熟悉jset.fn().mockReturnValue，但看起来你可能在那里多了一层“嵌套”；这就是您有效调用该方法的内容：[[{ signUpTyp: "EMAIL" }], {}] stubInitialState 是否需要成为数组中的对象？它应该只是一个对象吗？

标签： javascript react-native react-hooks jestjs

【解决方案1】：

您可以尝试使用jest.spyOn api 来模拟React.useState 方法：

const stubInitialState = [{ signUpTyp: "EMAIL" }];
const mockedSetform = jest.fn();

jest.spyOn(React, 'useState').mockReturnValue([stubInitialState, mockedSetform]);

jest.spyOn

【讨论】：

这个方法我试过了，还是遇到同样的问题