How to mock react custom hook returned value?

Question

Here is my custom hook:

  export function useClientRect() {
    const [scrollH, setScrollH] = useState(0);
    const [clientH, setClientH] = useState(0);
    const ref = useCallback(node => {
      if (node !== null) {
        setScrollH(node.scrollHeight);
        setClientH(node.clientHeight);
      }
    }, []);
    return [scrollH, clientH, ref];
  }
}

I want each time that it is called, it return my values. like:

jest.mock('useClientRect', () => [300, 200, () => {}]);

How can I achieve this?

What have you tried so far? Did you take a look at the Jest docs? jestjs.io/docs/en/manual-mocks#mocking-user-modules — TimoStaudinger
– TimoStaudinger, Commented Feb 17, 2020 at 20:36
@Timo looked... no luck. I think I may need to first spy on useClientRect then mock the return. — Neda Homa
– Neda Homa, Commented Feb 17, 2020 at 20:43
Have you tried github.com/testing-library/react-hooks-testing-library? — Bruno Monteiro
– Bruno Monteiro, Commented Feb 17, 2020 at 21:27
what if you mock scrollHeight/clientHeight instead of mocking hook? stackoverflow.com/a/56457850/2071697 — skyboyer
– skyboyer, Commented Feb 17, 2020 at 21:27

User 1058612 · Accepted Answer · 2023-08-11 17:41:01Z

249

Load the hook as a module. Then mock the module:

jest.mock('module_path/module_name', () => ({
    useClientRect: () => [300, 200, jest.fn()]
}));

mock should be called on top of the file outside test fn. Therefore we are going to have only one array as the mocked value.

If you want to mock the hook with different values in different tests:

import * as hooks from 'module_path/module_name';

it('a test', () => {
    jest.spyOn(hooks, 'useClientRect').mockImplementation(() => ([100, 200, jest.fn()]));
    //rest of the test
});

edited Aug 11, 2023 at 17:41

User 1058612

3,8291 gold badge31 silver badges34 bronze badges

answered Feb 18, 2020 at 14:11

Neda Homa

4,3873 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

nbpeth Over a year ago

mother of god, pointing out that it needed to be at the top was helpful - somehow no one has mentioned this in the dozen other tutorials i've looked at

Neda Homa Over a year ago

@MuhammadHaseeb You need to replace useClientRect with the name of your hook. In this example the hook returns an array that needs to be mocked.

Neda Homa Over a year ago

@muhammad-haseeb you need to replace the array with a mocked object. In your code console.log the value that your hook is returning and replace the array like: jest.spyOn(hooks, 'useYourHookName').mockImplementation(() => ({a: 100, b: 200, c: jest.fn()}));.

Neda Homa Over a year ago

@Mohammad Kermani when you have a hook file, it cab be something like '../folder_name/hook_file_name.ts'. when you mock a hook from a npm library it will be the name of the npm library.

stephen.hanson Over a year ago

In my particular case, I had to do import hooks from 'module_name instead of import * as hooks from 'module_name'. With the latter, the top-level mock was called, but the spy was not.

|

fregante · Accepted Answer · 2024-02-11 09:04:10Z

74

Adding on to this answer for typescript users encountering the TS2339: Property 'mockReturnValue' does not exist on type error message. There is now a jest.mocked helper you can call to mock with Type defs (which is a port of the ts-jest/utils mocked function).

import useClientRect from './path/to/useClientRect';

jest.mock('./path/to/useClientRect');

const mockUseClientRect = jest.mocked(useClientRect);

describe("useClientRect", () => {
  it("mocks the hook's return value", () => {
    mockUseClientRect.mockReturnValue([300, 200, () => {}]);
    // ... do stuff
  });

  it("mocks the hook's implementation", () => {
    mockUseClientRect.mockImplementation(() => [300, 200, () => {}]);
    // ... do stuff
  });
});

edited Feb 11, 2024 at 9:04

fregante

32.4k17 gold badges133 silver badges175 bronze badges

answered Mar 29, 2022 at 14:36

toakleaf

1,24910 silver badges11 bronze badges

1 Comment

Bora Yalcin Over a year ago

especially for Typescript usage this provides the best answer! thanks

fatihyildizhan · Accepted Answer · 2022-12-21 08:18:49Z

19

Well, this is quite tricky and sometimes developers get confused by the library but once you get used to it, it becomes a piece of cake. I faced a similar issue a few hours back and I'm sharing my solution for you to derive your solution easily.

My custom Hook:

  import { useEffect, useState } from "react";
  import { getFileData } from "../../API/gistsAPIs";
    
  export const useFilesData = (fileUrl: string) => {
    const [fileData, setFileData] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);
    useEffect(() => {
      setLoading(true);
      getFileData(fileUrl).then((fileContent) => {
        setFileData(fileContent);
        setLoading(false);
      });
    }, [fileUrl]);
    
    return { fileData, loading };
  };

My mock code: Please include this mock in the test file outside of your test function. Note: Be careful about the return object of mock, it should match with the expected response.

const mockResponse = {
  fileData: "This is a mocked file",
  loading: false,
};
jest.mock("../fileView", () => {
  return {
    useFilesData: () => {
      return {
        fileData: "This is a mocked file",
        loading: false,
      };
    },
  };
});

The complete test file would be:

import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import FileViewer from "../FileViewer";

const mockResponse = {
  fileData: "This is a mocked file",
  loading: false,
};
jest.mock("../fileView", () => {
  return {
    useFilesData: () => {
      return {
        fileData: "This is a mocked file",
        loading: false,
      };
    },
  };
});

describe("File Viewer", () => {
  it("display the file heading", async () => {
    render(<FileViewer fileUrl="" filename="regex-tutorial.md" className="" />);
    const paragraphEl = await screen.findByRole("fileHeadingDiplay");
    expect(paragraphEl).toHaveTextContent("regex-tutorial.md");
  });
}

edited Dec 21, 2022 at 8:18

fatihyildizhan

8,8207 gold badges68 silver badges92 bronze badges

answered Dec 22, 2021 at 11:04

murtaza salim

1991 silver badge7 bronze badges

2 Comments

Sudhanshu Rai Over a year ago

How would you share the mock between tests? Any idea?

Jarrod Medrano Over a year ago

What is the point of mockResponse variable? You don't use it anywhere?

Ricardo Álvarez · Accepted Answer · 2023-08-15 02:32:28Z

1

In my case I resolved it doing this:

jest.mock('pathToTheHookFile/useClientRect');

describe('It tests the hook', ()=> {
  beforeEach(() => {
    useClientRect.mockReturnValue([300, 200, jest.fn()])
  });

  it('Tests something', ()=> {
    ...
  }
});

answered Aug 15, 2023 at 2:32

Ricardo Álvarez

1401 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to mock react custom hook returned value?

4 Answers 4

11 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related