How to use assertLoadedBabelConfig method in Jest

You can use either es6 import or require js to import your js files in your jest tests.

When using es6 import you should know that jest is trying to resolve all the dependencies and also calls the constructor for the class that you are importing. During this step, you cannot mock it. The dependency has to be successfully resolved, and then you can proceed with mocks.

I should also add that as can be seen here jest by default hoists any jest.mocks to the top of the file so the order in which you place your imports does not really matter.

Your problem though is different. Your mock function assumes that you have included your js file using require js.

jest.mock('./dependecy', () => {
   return {
      default: jest.fn()
   };
});

When you import a file using require js, this is the structure it has:

So assuming I have imported my class called "Test" using require js, and it has method called "doSomething" I could call it in my test by doing something like:

const test = require('../Test');
test.default.doSomething();

When importing it using es6 import, you should do it differently though. Using the same example:

import Test from '../Test';
Test.doSomething();

EDIT: If you want to use es6 import change your mock function to:

jest.mock('./dependecy', () => jest.fn());

Just restart your server:

npm run serve

I ran into the same issue, where it kept on requesting for chunk. It happened because there was a reference issue inside my JS chunk that I was lazy loading. So I was lazy loading page data, and inside the JS for that, I was doing an import to a file that did not exists. And that lead to this issue.

Fixing that fixed it for me.

The problem is that Jest is hitting these CSS imports and trying to parse them as if they were JavaScript.

The "Unexpected token ." message probably comes because the first line of the file it is choking on is a CSS class declaration, i.e. .datepicker: { ... }.

Anyway, as pointed out in this answer, the way to get around this is to create a file containing a module which exports an empty object. I called mine styleMock.js.

module.exports = {};

Then, you need to create a jest.config.js file in your project root and add:

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
  }
};

The moduleNameMapper setting tells Jest how to interpret files with different extensions. In this case we simply need to point it at the empty file we just created. Obviously adjust the path to your file accordingly.

And note that you can expand the regex above for whichever file endings you need. Mine looks like:

moduleNameMapper: {
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    '<rootDir>/test/jest/__mocks__/fileMock.js',
  '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
},

where fileMock.js is identical to styleMock.js

Alternatively, you could use a module such as jest-transform-stub, which does the same thing for you.

You can use jest-runner-groups to define and run tests in groups. Once it's installed and added to the Jest configuration, you can tag your tests using docblock notation, like here:

/**
 * Foo tests
 *
 * @group group1/subgroup1
 * @group unit/foo
 */

describe( 'Foo class', () => {
    ...
} );

/**
 * Bar tests
 *
 * @group group1/subgroup2
 * @group unit/bar
 */

describe( 'Bar class', () => {
    ...
} );

Update your jest configuration to specify a new runner:

// jest.config.js
module.exports = {
    ...
    runner: "groups"
};

Then to run a specific group, you need to use --group= argument:

// Using the Jest executable
jest --group=mygroup

// Or npm
npm test -- --group=mygroup

You can also use multiple --group arguments to run multiple groups:

// Will execute tests in the unit/bar and unit/foo groups
npm test -- --group=unit/bar --group=unit/foo

// Will execute tests in the unit group (including unit/bar and unit/foo groups)
npm test -- --group=unit

Jest actually uses Jasmine, so you can use fail just like before.

Sample call:

fail('it should not reach here');

Here's the definition from the TypeScript declaration file for Jest:

declare function fail(error?: any): never;

If you know a particular call should fail you can use expect.

expect(() => functionExpectedToThrow(param1)).toThrow();
// or to test a specific error use
expect(() => functionExpectedToThrow(param1)).toThrowError();

See Jest docs for details on passing in a string, regex, or an Error object to test the expected error in the toThrowError method.

For an async call use .rejects

// returning the call
return expect(asyncFunctionExpectedToThrow(param1))
  .rejects();
// or to specify the error message
// .rejects.toEqual('error message');

With async/await you need to mark the test function with async

it('should fail when calling functionX', async () => {
  await expect(asyncFunctionExpectedToThrow(param1))
    .rejects();
  // or to specify the error message
  // .rejects.toEqual('error message');
}

See documentation on .rejects and in the tutorial.

Also please note that the Jasmine fail function may be removed in a future version of Jest, see Yohan Dahmani's comment. You may start using the expect method above or do a find and replace fail with throw new Error('it should not reach here'); as mentioned in other answers. If you prefer the conciseness and readability of fail you could always create your own function if the Jasmine one gets removed from Jest.

function fail(message) {
  throw new Error(message);
}

If you're using nodejs do the following:

Install node-fetch

npm install --save node-fetch

Add the line below to index.js:

global.fetch = require('node-fetch');

As suggested at https://github.com/vuejs/vue-test-utils-next/issues/194#issuecomment-695333180

Changing the shim to the below fixes the issue.

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent;
  export default component;
}

Assuming that you are also using babel-jest, make sure you have both versions of jest and babel-jest set to same numer (24, 26` etc.). I had the same problem and it was because the package versions were not in sync.

If you're using npm 7+, then peer dependencies are automatically installed and you could end up with two different versions of babel-jest used simultaneously. You can disable that behavior by adding

legacy-peer-deps=true

into .npmrc file.