How to use loadResolver method in Jest

I was able mock multiple calls and check the arguments this way:

expect(mockFn.mock.calls).toEqual([
  [arg1, arg2, ...], // First call
  [arg1, arg2, ...]  // Second call
]);

where mockFn is your mocked function name.

If you are using Webpack 5, you need to specify the features that you want to transpile in the ouput.environment configuration, as explained here: https://webpack.js.org/configuration/output/#outputenvironment.

output: {
  // ... other configs
  environment: {
    arrowFunction: false,
    bigIntLiteral: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
  },
}

EDIT 08/10/22

While doing some refactoring of my webpack configuration, I figured out that the arrows had stopped transpiling (or maybe I didn't test extensively when giving the original answer).

Two things weren't setup correctly: the target key was missing, and the babel configuration had a wrong value.

For supporting legacy browsers, the target key needs to be set like this:

target: ['web', 'es5']

While in the Babel configuration, I had added 'not dead' in the browserslist configuration under targets in the Babel loader, so since IE11 is now technically dead, this configuration removed the trasnpilation of the arrow function.

So if you still need to transpile the arrow function, this would be the relevant part in the Babel configuration.

module: {
  rules: [
    {
      test: /\.m?js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'entry',
                targets: {
                  // be sure not to add 'not dead' here 
                  browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']
                },
                corejs: {
                  version: 3,
                  proposals: false,
                },
              },
            ],
          ],
          plugins: [['@babel/plugin-transform-runtime', { corejs: 3 }]],
        },
      },
    },
  ],
},

I just found a solution.

I had to mock Router to be a div and contains its children code. This works the following way:

You need the folder __mocks__/react-router-dom.js which contains the following code:

import React from 'react';

const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>

module.exports = reactRouterDom

Now you can use the MemoryRouter to define the path which the Route should point to.

App.test.js:

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from 'react-router-dom';
import App from './App';


describe("unit-test", () => {
    it("renders the right component with following path '/impressum'", () => {
        const { getByTestId } = render(
            <MemoryRouter initialEntries={['/impressum']}>
                <App></App>
            </MemoryRouter>
        )

        let impressumPage = getByTestId("impressum-page")

        expect(impressumPage).toBeInTheDocument()
    })
})

Also visit the following link, I got the solution from there. https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303

Works for me with the following settings.

// package.json

"jest": {
  "scriptPreprocessor": "preprocessor.js",
  "unmockedModulePathPatterns": [
    "react"
  ],
  "setupEnvScriptFile": "before_test.js"
}

// preprocessor.js

var ReactTools = require('react-tools');

module.exports = {
    process: function(src) {
        return ReactTools.transform(src);
    }
};

// before_test.js

React = require("react"); // Global React object

Here is an UT solution:

index.ts:

import fs from 'fs';

export const viewText = () => {
  fs.readFile('poem.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
  });
};

index.spec.ts:

import { viewText } from './';
import fs from 'fs';

const mockPoem =
  'Some say the world will end in fire, Some say in ice. From what I’ve tasted of desire I hold with those who favor fire ... And would suffice.';

describe('viewText', () => {
  afterEach(() => {
    jest.restoreAllMocks();
  });
  test('prints poem to console', done => {
    const logSpy = jest.spyOn(console, 'log');
    let readFileCallback;
    // @ts-ignore
    jest.spyOn(fs, 'readFile').mockImplementation((path, options, callback) => {
      readFileCallback = callback;
    });

    viewText();
    readFileCallback(null, mockPoem);
    expect(logSpy).toBeCalledWith(mockPoem);
    expect(fs.readFile).toBeCalledWith('poem.txt', 'utf8', readFileCallback);
    done();
  });

  test('should throw error when read file failed', done => {
    let readFileCallback;
    // @ts-ignore
    jest.spyOn(fs, 'readFile').mockImplementation((path, options, callback) => {
      readFileCallback = callback;
    });

    viewText();
    const mError = new Error('read file failed');
    expect(() => readFileCallback(mError, null)).toThrowError(mError);
    expect(fs.readFile).toBeCalledWith('poem.txt', 'utf8', readFileCallback);
    done();
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/58810079/index.spec.ts (11.118s)
  viewText
    ✓ prints poem to console (23ms)
    ✓ should throw error when read file failed (3ms)

  console.log node_modules/jest-mock/build/index.js:860
    Some say the world will end in fire, Some say in ice. From what I’ve tasted of desire I hold with those who favor fire ... And would suffice.

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        13.129s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58810079

Nowadays you can write it in this way as well: docs

describe('Fetching', () => {
    const filters = {
        startDate: '2015-09-01'
    };
    const api = new TestApiTransport(); 

 it('should reject if no startdate is given', () => {
   expect.assertions(1);
   return expect(MyService.fetch()).rejects.toEqual({
     error: 'Your code message',
   });
 });          


 it('should return expected data', () => {
   expect.assertions(1);
   return expect(MyService.fetch(filters, null, api)).resolves.toEqual(extectedObjectFromApi);
 });            
});

Update (06.01.2019)

Agree that the accepted answer doesn't work correctly as line expect.assertions(1); does all the magic. Link to docs

expect.assertions(number) verifies that a certain number of assertions are called during a test. This is often useful when testing asynchronous code, in order to make sure that assertions in a callback actually got called.

So putting this line at the top will control that the specific number of assertions are made by the time when the test is run.

It worked for me after I changed the .babelrc file to babel.config.js.

I was able mock multiple calls and check the arguments this way:

expect(mockFn.mock.calls).toEqual([
  [arg1, arg2, ...], // First call
  [arg1, arg2, ...]  // Second call
]);

where mockFn is your mocked function name.

[Edit] I don't know if the question was edited after I added the answer or I just didn't understand the question correctly, but my answer describes how to resolve the error in testing environment.

If you have this issue out of testing environment - this answer will not help you, sorry.

Late for the party, but just had to resolve the same issue, so I'll leave it here just in case.

One way to resolve the problem as mentioned here is:

const wrapper = mount(MyComponent, {
  mocks: {
    // Always returns the input
    $t: i => i,
    localePath: i => i
  }
});

However, I've recently found a better way:

./tests/jest.setup.js:

// https://github.com/nuxt/nuxt.js/issues/4115
import Vue from 'vue'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Mock Nuxt components
config.stubs['nuxt-link'] = true; // string stabs like '<a><slot /></a>' are now depreciated
config.stubs['no-ssr'] = true;
config.mocks.$t = i => i;
config.mocks.localePath = i => i;

./jest.config.js:

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jest.setup.js'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  testPathIgnorePatterns: [
    'node_modules',
    'cypress',
  ],
}

Surprisingly enough, I don't need to install ts-jest package at least now even though I use Nuxt Typescript.

Then in each test suite I need to use the mock I've already mentioned on top of this answer.