DEV Community

Lucas jin
Lucas jin

Posted on

Mocking Modules in Jest: Three Powerful Techniques

Jest offers three effective methods to mock modules in your tests, enabling you to isolate and control external dependencies for focused testing. Here's a detailed breakdown of each approach:

  1. Direct Mocking in the Test File (Using jest.mock):
  • Ideal for mocking specific modules within the context of a single test file.

  • Syntax:

jest.mock('module-to-mock', () => ({
  // Mock implementation for the module
}));
Enter fullscreen mode Exit fullscreen mode

Example:

import { useSite } from 'src/context/SiteContext'; // Import the mocked module
jest.mock('src/context/SiteContext', () => ({
  useSite: jest.fn(),
}));
const useSiteMockImpelmetation = (market: string) => {
  (useSite as any).mockImplementation(() => {
    return {
      config: {
        market,
      },
    };
  });
};
 it('should show 4 list item if is spanish market', () => {
    mockMarket('es');
    renderComponent();
    const items = screen.getAllByRole('listitem');
    expect(items).toHaveLength(4);
  });
Enter fullscreen mode Exit fullscreen mode
  1. Global Mocking in jest.setup.ts:
  • Suitable for globally mocking modules across all test files.

  • Location: Create a file named jest.setup.ts (or .js) in your project's root directory.

Syntax:

jest.mock('module-to-mock', () => ({
  // Mock implementation for the module
}));
Example (in jest.setup.ts):



jest.mock('next-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));
Enter fullscreen mode Exit fullscreen mode
  1. Manual Mocking in the __mocks__ Folder: (Manual Mocks · Jest )
  • Useful when the mocked module has complex logic or requires custom configuration.

  • Steps:

    • Create a directory named mocks within the same directory as the module you want to mock.
    • Inside __mocks__, create a file with the same name as the module (including extension). This file will contain your mock implementation.
  • Example (assuming src/context/SiteContext.tsx is the module to mock):

    • Create mocks/src/context/SiteContext.tsx.
    • Implement your mock logic in this file.
jest.mock('src/context/SiteContext', () => ({
  useSite: jest.fn(() => ({ 
    config: {
      market:'us'
      }
  })),
}));
Enter fullscreen mode Exit fullscreen mode

Then in the test file, we can use it:

jest.mock('src/context/SiteConfigContext');
Enter fullscreen mode Exit fullscreen mode
  • The useSite mock will automatically have the mock value that defined in the __mocks__/src/context/SiteContext.tsx file

Props and cons:

Method Pros Cons
Direct Mocking (jest.mock in Test File) Targeted: Mocks apply only to a specific test file. - Simple: Easy to set up for basic mocking needs. - Clear: Mock behavior stays within the test case. Limited Scope: Mocks are not shared across other tests. - Repetition: May lead to code duplication if mocking the same module in multiple tests.
Global Mocking (jest.setup.ts) Consistency: Mocks are applied consistently across all tests. - Convenience: No need to repeat mock definitions for each test. Global Impact: Accidental side effects in mocks can affect all tests. - Less Control: Less granular control over mock behavior compared to direct mocking.
Manual Mocking (mocks Folder) Flexibility: Suitable for complex mocking logic or custom configurations. - Organization: Keeps mock code separate for better maintainability. Setup: Requires creating a dedicated folder structure. - Potential Issues: May be harder to debug if mock logic becomes intricate.

Choosing the Right Method:

  • For basic mocks within a single test: Direct mocking with jest.mock is straightforward and keeps code focused.

  • For consistent global mocking: Use jest.setup.ts when you need the same mock behavior across all tests.

  • For complex or reusable mock logic: Manual mocking with the mocks folder offers flexibility and organization.

  • We always can use jest.mock('path') to unmock the mock file

Top comments (10)

Collapse
 
timi_cpeksi_b4abc61f00d31 profile image
timi cpeksi

Hello, friends! I want to share my experience of playing on the 1win website, which has become a real discovery for me! I live in Ethiopia, and it used to be difficult for me to find a platform that offered a variety of bets and excellent customer service. But with 1win, I got all this and more! A wide selection of sports events, a user-friendly interface, and plenty of opportunities to win have made my gaming experience extremely enjoyable. I recommend all my friends from Ethiopia to try this site - you won't regret it!

Collapse
 
maksim_lenivenko_b8354ded profile image
Maksim Lenivenko

לאחרונה החלטתי לנסות את עיסוי ארוטי בראשון לציון והייתי מרוצה להפליא! הילדה הייתה כל כך מושכת וכריזמטית שמיד הרגשתי בנוח. העיסוי שהיא נתנה היה קסם אמיתי, שבו כל נגיעה עוררה בי תחושות חדשות. כל התהליך התרחש באווירה נעימה ומרגיעה, שאפשרה לי לשקוע לגמרי בהנאה.

Collapse
 
maksim_lenivenko_b8354ded profile image
Maksim Lenivenko

Recently bought a new car from the car dealership, namely Peugeot model 408 . I doubted the purchase for a long time, but still made it. Modern cars are not just means of transportation, they are comfort, safety and technology, packed in a stylish body. Everything went perfectly in the car dealership: from the consultation to receiving the keys. In just a couple of hours I became the owner of a new Peugeot 408!

Collapse
 
timi_cpeksi_b4abc61f00d31 profile image
timi cpeksi

Greetings, friends! I'd like to share my impression of glory-casino.info/. As someone who has been playing in online casinos for a long time, I can say that this is one of the best places to play in Bangladesh. Every time I visit the site, I am greeted by a friendly interface and new promotions that make the game even more interesting. I also like the option to play in the mobile app, which allows me to enjoy my favorite games even on the go. If you want to get real pleasure from gambling, Glory will definitely not disappoint you!

Collapse
 
timi_cpeksi_b4abc61f00d31 profile image
timi cpeksi

Hello, everyone! I've been looking for a gambling platform that would meet all my requirements for a long time and I finally found it - BC Game app download! I am based in Nigeria and it is very difficult to find a website that offers such a wide range of gaming opportunities. Not only does BC.Game offer a wide variety of games - from classic slots to impressive table games - but it does it at the highest level! With fast payouts and easy navigation, I can enjoy my favorite games without any difficulties. Now I know for sure that my choice is BC.Game!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.