如何测试/模拟反应钩子？

Posted 2023-03-08

【中文标题】如何测试/模拟反应钩子？

【英文标题】：how to test/mock out react hooks?

【发布时间】：2020-07-07 15:19:50

【问题描述】：

最近我升级了 okta-react 库并已将应用程序转换为使用新的挂钩。我现在正在更新我的测试。 useOktaAuth() 是 undefined。我希望能够模拟出来，以便在用户登录时进行测试。

const  authState, authService  = useOktaAuth();

// TypeError: Cannot destructure property `authState` of 'undefined' or 'null'

为了解决这个问题，我尝试通过以下方式模拟钩子：

    jest.mock('@okta/okta-react', () => (
      useOktaAuth: () => 
        return 
          authState: ,
          authService: 
        ;
      
    ));

这是行不通的。我仍然对如何测试这些组件有任何想法？

谢谢

【参考方案1】：

经过不断的研究和工作，这对我有用。

jest.mock("@okta/okta-react/dist/OktaContext", () => (
  useOktaAuth: () => 
    return 
      authState: ,
      authService: ,
    ;
  ,
));

describe("Login", () => 
  test("should ", () => 
    const wrapper = shallow(<Login authService=null />);
    expect(wrapper.length).toBe(1);
  );
);

注意：我将 authService 参数传递给组件。

【讨论】：

谢谢，经过数小时的努力，终于成功了！

【参考方案2】：

你很亲密：

jest.mock('@okta/okta-react', () => (
  useOktaAuth: () => (
    authState:  isAuthenticated: true,
    authService:  handleAuthentication: jest.fn() 
  )
));

【讨论】：

有谁知道如何重置它，以便isAuthenticated 可以在真假之间切换？这满足了依赖项的要求，但是我不能在 beforeEach 或 beforeAll 挂钩中执行此操作，因为测试无法在该范围内找到依赖项。

【参考方案3】：

除了 Elmatsidis Paul 的回答之外，我还必须再添加 1 个模拟来涵盖 useOktaAuth 和 withOktaAuth：

jest.mock('@okta/okta-react', () => (
    useOktaAuth: () => 
        return 
            authState: ,
            authService: 
        ;
    ,
    withOktaAuth: (x: any) => x
));

【讨论】：

知道如何模拟 组件吗？

【参考方案4】：

我有几乎相同的消息说

TypeError: 无法解构 '(0 , _oktaReact.useOktaAuth)(...)' 的属性 'authState' 因为它是未定义的。**"

组件部分：

import  useOktaAuth  from "@okta/okta-react";

const Login = () => 
const  authState  = useOktaAuth();
...

测试：

jest.mock('@okta/okta-react', () => (
    useOktaAuth: () => 
      return 
        authState: ,
        authService: 
    ;
  
));

describe("<Login /> component tests", () => 
  it("Should render Login component", done => 
      const wrapper = shallow(<Login/>);

      setImmediate(() => 
          wrapper.update();
          try 
              // Your assertion here
              done();
           catch (error) 
              done.fail(error);
          
      );
  );

);

【讨论】：

知道如何模拟 组件吗？

【参考方案5】：

jest.mock('@okta/okta-react', () => (
    useOktaAuth: () => 
 return 
   authState: ,
   authService: 
   ;
 
 ));

 test('should render CreateDeploymentManifestPage and ShowDeploymentManifest', 
  () => 
  const myMock= jest.fn();

  const wrapper = shallow(<CreateDeploymentManifestPage />);
  const basicInfo = wrapper.find(DeploymentBasicInfo);
  expect(wrapper.containsAllMatchingElements([
   <DeploymentBasicInfo />,
  ])).toBe(true);
  );

【讨论】：

只要在测试组件外面写mock，就可以了。它对我有用。

CreateDeploymentManifestPage 是包含另一个组件 DeploymentBasicInfo 的组件。 CreateDeploymentManifestPage 正在使用 useOktaAuth 挂钩来获取 authState 和 authService。

知道如何模拟 组件吗？