how to test/mock out react hooks?

Question

Recently I upgrade the okta-react library and have transitioned the app to use the new hooks. I am updating my tests now. useOktaAuth() is undefined. I want to be able to mock it out so I can test when a user is logged in.

const { authState, authService } = useOktaAuth();

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

In order to fix that, I tried mocking the hook by doing:

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

That isn’t working. I still get Any ideas on how to test these components?

Thanks

Lyle

Answer 1

You were close:

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

Pindling

Does anyone know how to reset this so that isAuthenticated could go between true and false? This satisfies the requirements of the dependencies but, I can't do it in a beforeEach or beforeAll hook as the test can't find the dependencies within that scope. – Shedevil

Hello @RyanHamblin, were you able to resolve this? I'm facing similar issue. – Lilli

@Lilli indeed, I solved it by not worrying about those details for now lol.. – Shedevil

I share the need to update the isAuthenticated value by test. – Cracksman

Answer 2

After continuous research and work, this worked for me.

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

Note: I passed authService param to the component.

Photoneutron

Thank you, after hours of struggle this finally works! – Schoolroom

Answer 3

I had almost the same message saying

TypeError: Cannot destructure property 'authState' of '(0 , _oktaReact.useOktaAuth)(...)' as it is undefined.**"

Component's part:

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

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

TEST:

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

});

Geronimo

Any idea how to mock the <Security> component? – Experiment

Answer 4

in addition to Elmatsidis Paul answer I had to add 1 more mock to cover both useOktaAuth and withOktaAuth:

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

Pelting

Any idea how to mock the <Security> component? – Experiment

Answer 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);
  });

Hankypanky

just write mock outside the test component , it will work. It worked for me. – Hankypanky

CreateDeploymentManifestPage is component which contains another component DeploymentBasicInfo. CreateDeploymentManifestPage is using useOktaAuth hooks to get authState and authService. – Hankypanky

Any idea how to mock the <Security> component? – Experiment