What is the best way to fake dependencies in Jest for each individual test?

Question

What is the best way to fake dependencies in Jest for each individual test?

Check out the complete minimal reproducible example

Let's take a look at the app below:

src/food.js

const Food = {
  carbs: "rice",
  veg: "green beans",
  type: "dinner"
};

export default Food;

src/food.js

import Food from "./food";

function formatMeal() {
  const { carbs, veg, type } = Food;

  if (type === "dinner") {
    return `Good evening. Dinner consists of ${veg} and ${carbs}. Delicious!`;
  } else if (type === "breakfast") {
    return `Good morning. Breakfast includes ${veg} and ${carbs}. Yum!`;
  } else {
    return "No meal for you!";
  }
}

export default function getMeal() {
  const meal = formatMeal();

  return meal;
}

Below is a test scenario I have set up:

tests_/meal_test.js

import getMeal from "../src/meal";

describe("meal tests", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("should display dinner", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner consists of green beans and rice. Delicious!"
    );
  });

  it("should display breakfast (mocked)", () => {
    jest.doMock("../src/food", () => ({
      type: "breakfast",
      veg: "avocado",
      carbs: "toast"
    }));

    // prints out the newly mocked food!
    console.log(require("../src/food"));

    // ...however, we did not mock it in time, so this fails!
    expect(getMeal()).toBe("Good morning. Breakfast includes avocado and toast. Yum!");
  });
});

How can I effectively mock the Food object for each individual test? Essentially, I want the mock to only apply to the "should display breakfast (mocked)" test case.

I also prefer not to alter the application source code if possible (although considering having Food as a function that returns an object might be acceptable - still struggling to make that work as well)

Some methods I have attempted already:

Passing the Food object through getMeal + employing dependency injection into formatMeal
- (the main objective here is to avoid passing around Food throughout the entire app)
Manual mocking + jest.mock() - there might be a solution within this approach, but managing the value and resetting it per test due to import time discrepancies has proven challenging
- Using jest.mock() at the start could override it for every test case, and figuring out how to adjust or reset the value of Food for each test remains elusive.

javascript jestjs mocking

Answer 1

Answer №1

Concise answer

To ensure proper mocking in Jest, use require to import modules within each test function after setting up the mocks.

it("should print breakfast (mocked)", () => {
    jest.doMock(...);
    const getMeal = require("../src/meal").default;

    ...
});

Alternatively,

To mock an object like Food, turn it into a function and utilize jest.mock at the module level.

import getMeal from "../src/meal";
import food from "../src/food";

jest.mock("../src/food");
food.mockReturnValue({ ... });

...

Detailed explanation

Jest documentation highlights the importance of placing your jest.mock calls in close proximity to the require/import statement for effective mocking:

Note: In order to mock properly, Jest needs jest.mock('moduleName') to be in the same scope as the require/import statement.

ES6 imports are resolved before test functions execute, making it necessary to declare mocks outside of the tests and prior to any imports. Jest's Babel plugin hoists jest.mock statements to precede any imports, ensuring their execution beforehand. Remember that jest.doMock is deliberately not hoisted.

If dealing with objects like in the example where direct mocking is challenging due to the module structure, consider refreshing the module for altered values if needed.

Option 1a: Testing without ES6 modules

While ES6 imports demand module-level scoping, traditional require allows calling from test scopes instead.

describe("meal tests", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("should print dinner", () => {
    const getMeal = require("../src/meal").default;

    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    jest.doMock("../src/food", () => ({
      type: "breakfast",
      veg: "avocado",
      carbs: "toast"
    }));

    const getMeal = require("../src/meal").default;

    // ...test functionality
    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });
});

Option 1b: Dynamically reloading module

An alternative approach involves wrapping the target function.

Instead of

import getMeal from "../src/meal";

try this:

const getMeal = () => require("../src/meal").default();

Option 2: Flexibility through functional exports

If the mocked module were a function rather than an object literal, seamless mocking would be possible. Such mutable mocks facilitate test variations.

src/food.js

const Food = {
  carbs: "rice",
  veg: "green beans",
  type: "dinner"
};

export default function() { return Food; }

src/meal.js

import getFood from "./food";

function formatMeal() {
  const { carbs, veg, type } = getFood();

  if (type === "dinner") {
    return `Good evening. Dinner is ${veg} and ${carbs}. Yum!`;
  } else if (type === "breakfast") {
    return `Good morning. Breakfast is ${veg} and ${carbs}. Yum!`;
  } else {
    return "No soup for you!";
  }
}

export default function getMeal() {
  const meal = formatMeal();

  return meal;
}

__tests__/meal_test.js

import getMeal from "../src/meal";
import food from "../src/food";

jest.mock("../src/food");

const realFood = jest.requireActual("../src/food").default;    
food.mockImplementation(realFood);

describe("meal tests", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("should print dinner", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    food.mockReturnValueOnce({ 
        type: "breakfast",
        veg: "avocado",
        carbs: "toast"
    });

    // ...modify expectations
    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });
});

Additional strategies include segregating tests across modules or utilizing mutable objects instead of default exports for more adaptable mocking.

Answer 2

Concise answer

To ensure proper mocking in Jest, use require to import modules within each test function after setting up the mocks.

it("should print breakfast (mocked)", () => {
    jest.doMock(...);
    const getMeal = require("../src/meal").default;

    ...
});

Alternatively,

To mock an object like Food, turn it into a function and utilize jest.mock at the module level.

import getMeal from "../src/meal";
import food from "../src/food";

jest.mock("../src/food");
food.mockReturnValue({ ... });

...

Detailed explanation

Jest documentation highlights the importance of placing your jest.mock calls in close proximity to the require/import statement for effective mocking:

Note: In order to mock properly, Jest needs jest.mock('moduleName') to be in the same scope as the require/import statement.

ES6 imports are resolved before test functions execute, making it necessary to declare mocks outside of the tests and prior to any imports. Jest's Babel plugin hoists jest.mock statements to precede any imports, ensuring their execution beforehand. Remember that jest.doMock is deliberately not hoisted.

If dealing with objects like in the example where direct mocking is challenging due to the module structure, consider refreshing the module for altered values if needed.

Option 1a: Testing without ES6 modules

While ES6 imports demand module-level scoping, traditional require allows calling from test scopes instead.

describe("meal tests", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("should print dinner", () => {
    const getMeal = require("../src/meal").default;

    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    jest.doMock("../src/food", () => ({
      type: "breakfast",
      veg: "avocado",
      carbs: "toast"
    }));

    const getMeal = require("../src/meal").default;

    // ...test functionality
    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });
});

Option 1b: Dynamically reloading module

An alternative approach involves wrapping the target function.

Instead of

import getMeal from "../src/meal";

try this:

const getMeal = () => require("../src/meal").default();

Option 2: Flexibility through functional exports

If the mocked module were a function rather than an object literal, seamless mocking would be possible. Such mutable mocks facilitate test variations.

src/food.js

const Food = {
  carbs: "rice",
  veg: "green beans",
  type: "dinner"
};

export default function() { return Food; }

src/meal.js

import getFood from "./food";

function formatMeal() {
  const { carbs, veg, type } = getFood();

  if (type === "dinner") {
    return `Good evening. Dinner is ${veg} and ${carbs}. Yum!`;
  } else if (type === "breakfast") {
    return `Good morning. Breakfast is ${veg} and ${carbs}. Yum!`;
  } else {
    return "No soup for you!";
  }
}

export default function getMeal() {
  const meal = formatMeal();

  return meal;
}

__tests__/meal_test.js

import getMeal from "../src/meal";
import food from "../src/food";

jest.mock("../src/food");

const realFood = jest.requireActual("../src/food").default;    
food.mockImplementation(realFood);

describe("meal tests", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("should print dinner", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    food.mockReturnValueOnce({ 
        type: "breakfast",
        veg: "avocado",
        carbs: "toast"
    });

    // ...modify expectations
    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });
});

Additional strategies include segregating tests across modules or utilizing mutable objects instead of default exports for more adaptable mocking.

Answer 3

Answer №2

@anttix provided a top-notch answer, but I'd like to introduce another perspective that could prove valuable in different situations.

babel-plugin-rewire makes it possible to override import Food from "./food"; for testing purposes.

To begin, simply run yarn add babel-plugin-rewire

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        node: 'current',
      },
    },
  ],
];

const plugins = [ 
  "babel-plugin-rewire"
];

module.exports = { presets, plugins };

meal_test.js

import getMeal from "../src/meal";
import Food from "../src/food";
import { __RewireAPI__ as RewireAPI } from "../src/meal";

describe("meal tests", () => {
  // beforeEach(() => {
  //   jest.resetModules();
  // });
  afterEach(() => {
    RewireAPI.__Rewire__('Food', Food)
  });

  it("should print dinner", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    const mockFood = {
      type: "breakfast",
      veg: "avocado",
      carbs: "toast"
    };
    RewireAPI.__Rewire__('Food', mockFood)

    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });

  it("should print dinner #2", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });
});

Answer 4

@anttix provided a top-notch answer, but I'd like to introduce another perspective that could prove valuable in different situations.

babel-plugin-rewire makes it possible to override import Food from "./food"; for testing purposes.

To begin, simply run yarn add babel-plugin-rewire

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        node: 'current',
      },
    },
  ],
];

const plugins = [ 
  "babel-plugin-rewire"
];

module.exports = { presets, plugins };

meal_test.js

import getMeal from "../src/meal";
import Food from "../src/food";
import { __RewireAPI__ as RewireAPI } from "../src/meal";

describe("meal tests", () => {
  // beforeEach(() => {
  //   jest.resetModules();
  // });
  afterEach(() => {
    RewireAPI.__Rewire__('Food', Food)
  });

  it("should print dinner", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });

  it("should print breakfast (mocked)", () => {
    const mockFood = {
      type: "breakfast",
      veg: "avocado",
      carbs: "toast"
    };
    RewireAPI.__Rewire__('Food', mockFood)

    expect(getMeal()).toBe("Good morning. Breakfast is avocado and toast. Yum!");
  });

  it("should print dinner #2", () => {
    expect(getMeal()).toBe(
      "Good evening. Dinner is green beans and rice. Yum!"
    );
  });
});

What is the best way to fake dependencies in Jest for each individual test?

Answer №1

Concise answer

Detailed explanation

Option 1a: Testing without ES6 modules

Option 1b: Dynamically reloading module

Option 2: Flexibility through functional exports

Answer №2

Similar questions

What is the process for transforming an AJAX request's onreadystatechange into a promise?

Issue with fading hover effect on links is not functioning

Ways to determine the height of a row within a flexbox

Adding an image from JavaScript to a .pug file

In order to properly execute the JavaScript code, it is essential to create a highly customized HTML layout from the ER

Bootstrap modals are refusing to open

What's Vue.js error message about unknown action type?

Creating a customized pagination feature in Angular 8 without relying on material design components

How can callback functions be used with jquery-templ?

Troubleshooting Event.target Problem in Firefox 6

What is the process of converting the timing from my stopwatch to a standard time format?

Web application error: Karma and Webpack cannot locate Angular controller

Error occurs when trying to map an array within an asynchronous function

Place the image on the canvas

Looking to dynamically display users added to an array in a table using Angular and JavaScript?

Refreshin the attached DOM to a directive without a page reload

Refresh React Components on the Fly (Solr)

Facing an obstacle in Angular as I am unable to view my data

After updating to version 0.10.10, Visual Studio Code no longer recognizes JavaScript syntax highlighting

Best method for removing CrosshairMove event listener in lightweight charts