How to use shouldLoadAsEsm method in Jest

According to Jest-Platform document, you can use jest-diff to get a "pretty-printed" string illustrating the difference between the two arguments.

Your message function will become:

const { diff } = require('jest-diff'); // already available if Jest is installed

// ...

message: () => "expect(received).toTorgle(expected):" + diff(expected, received),

By default, the first argument to diff() is labelled Expected and the second is labelled Received. This can be changed by supplying Options as a third argument. See the Options documentation.

That is a bug that came with node v11.11. You can downgrade to v11.10 or wait for the fix which facebook has already pushed (jest error in Node version over 11.11).

If your problem is TravisCI related then you can set a fixed version which works:

node_js:
  - "11.10.1"

Jest doesn't support ES6 module and hence throwing this error when you directly run the test with Jest. if you want to run like that then you have to add babel.

On the other side, when you run the test with react-scripts it uses babel behind the scene to Transpile the code.

In newer version of jest, babel-jest is now automatically loaded by Jest and fully integrated

Hope this answer your question.

Adding babel in jest.

Installation

babel-jest is now automatically loaded by Jest and fully integrated. This step is only required if you are using babel-jest to transform TypeScript files.

npm install --save-dev babel-jest

Usage

In your package.json file make the following changes:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

Create .babelrc configuration file

Create a babel.config.json config in your project root and enable some presets.

To start, you can use the env preset, which enables transforms for ES2015+

npm install @babel/preset-env --save-dev

In order to enable the preset you have to define it in your babel.config.json file, like this:

{
  "presets": ["@babel/preset-env"]
}

Check for more details on Babel official site

tsconfig-paths-jest is not usable in Jest >23. For current Jest 26 I got it working via: https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/

jest.config.js

const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' } )
};

tsconfig.json "compilerOptions"

 "baseUrl": "./src",
 "paths": {            
  "@models/*": [ "./models/*" ],
  "@inputs/*": [ "./inputs/*" ],
  "@tests/*": [ "./__tests__/*" ],
  "@resolvers/*": [ "./resolvers/*" ],
  "@seeds/*": [ "./seeds/*" ],
  "@index": [ "./index.ts" ],
  "@ormconfig":[ "../ormconfig.ts" ]
  },

Solved removing packages-lock.json and running again using NodeJS 14 (was 10)

Since this didn't have an official answer, I added one to the jest documentation after some further research / experimentation (and it was signed off by one of their moderators).

So, yes, jest runs each test in a file sequentially, waiting for each to finish before moving onto the next. This is now described in Setup and Teardown.

Further note that describe blocks are all executed before any of the test blocks.

For reference, the code that implements this is mostly in jest-circus/src/run.ts and eventHandler.ts.

If you are tying to import any file for example a font file, then simply create a mockFile that just have

// mockFile.ts or mockFile.js
export default {};

and then in jest.config.js

  moduleNameMapper: {
    '^.+\\.(woff2)$': '<rootDir>/<path to file>/mockFile.ts',
  },

This will resolve to the mockFil when it will try to import a font file. You can also add other file extentions like '^.+\\.(jpg|png|woff2)$: '<rootDir>/<path to file>/mockFile.ts'. It should work.

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

The beforeAll function is called only once before all the specs in describe are run.

When return promise, Jest will wait for the promise to resolve before letting the test run.

describe('getData() results test', () => { 
  let data = null;

  beforeAll(() => getData().then(response => {
    data = response;
  }));

  it('foo', () => expect(data.foo).toEqual(1));

  it('bar', () => expect(data.bar).toEqual(2));

  it('bar', () => expect(data.bar).toEqual(3));
});