How to use isAsymmetricMatcher method in Jest

You try this lib that extends jest: https://github.com/mattphillips/jest-expect-message

test('returns 2 when adding 1 and 1', () => {
  expect(1 + 1, 'Woah this should be 2!').toBe(3);
});

The actual comparison code used by Jest's toBeCloseTo method is as follows:

      expectedDiff = Math.pow(10, -precision) / 2;
      receivedDiff = Math.abs(expected - received);
      pass = receivedDiff < expectedDiff;

(Oddly enough the documentation lists the second parameter precision as numDigits instead.)

So your test fails because the difference between the expected value and the actual value exceeds 0.5 × 10⁻⁵: it's about 0.57 × 10⁻⁵. Rounded to five decimal places, the received value 0.01491570355 is 0.01492.

As far as I can see the logic behind a comparison such as this is that the actual value will be considered close to the expected value to within numDigits digits if the expected value is what you get from rounding the actual value to numDigits decimal places.

If you have Babel in your stack, you can fix this in the right way using babel-jest

Just do npm i --save-dev babel-jest and in your jest settings file add:

"moduleNameMapper": {
  "^.+\\.(css|less|scss)$": "babel-jest"
}

In your package.json, or jest.config.js/jest.config.ts file, change the value of the testEnvironment property to jsdom.

package.json

"jest":{
    "testEnvironment": "jsdom"
}

jest.config.[js|ts]

module.exports = {
    "testEnvironment": "jsdom"
}

Important note for jest >28

If you are using jest 28, you will need to install jest-environment-jsdom separately by either:

npm: npm i jest-environment-jsdom --save-dev

yarn: yarn add -D jest-environment-jsdom

Why?

By default, jest uses the node testEnvironment. This essentially makes any tests meant for a browser environment invalid.

jsdom is an implementation of a browser environment, which supports these types of UI tests.

For Jest version 28 and greater, jest-environment-jsdom was removed from the default jest installation to reduce package size.

Additional reading

jest testEnvironment documentation

Jest 28 breaking changes

Ran into the similar problem last week, we have a React-Native project that has recently upgraded to:

"react-native": "0.45.1"
"react": "16.0.0-alpha.12"
"jest": "20.0.4"
"react-test-renderer": "15.5.4"

and then we try to run our Jest tests and we saw the same issue as you mentioned above. Then we realized there is a cutting edge version of the react-test-renderer and we tried that one out:

"react-test-renderer": "^16.0.0-alpha.12",

And now the issue is no longer there.

Try running npm run test --clearCache as adviced here.

It did the job for me.

Yes, you should be wrapping the <LoginForm /> with a <Provider store={store}>.

You can set up a reusable function that will automatically do that for you:

https://redux.js.org/usage/writing-tests#components

Here is the solution:

index.ts:

export function main() {
  const blob = new Blob(["testing"], { type: "application/pdf" });
  console.log(blob);
}

index.spec.ts:

import { main } from "./";

describe("pdf blob", () => {
  it("should mock correctly", () => {
    const mBlob = { size: 1024, type: "application/pdf" };
    const blobSpy = jest
      // @ts-ignore
      .spyOn(global, "Blob")
      .mockImplementationOnce(() => mBlob);
    const logSpy = jest.spyOn(console, "log");
    main();
    expect(blobSpy).toBeCalledWith(["testing"], {
      type: "application/pdf"
    });
    expect(logSpy).toBeCalledWith(mBlob);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/59062023/index.spec.ts
  pdf blob
    ✓ should mock correctly (21ms)

  console.log node_modules/jest-mock/build/index.js:860
    { size: 1024, type: 'application/pdf' }

----------|----------|----------|----------|----------|-------------------|
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:       1 passed, 1 total
Snapshots:   0 total
Time:        4.736s, estimated 12s

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

There could be many reasons, and most are due to version incompatibilites or using a ^ in package.json:

1. Ensure react and react-dom are of the same version

Ensure that you have also updated the react-dom package and it is of the same version as react. In general react and react-dom should always be the same version in package.json as the React team updates them together.

If you want to install React 16.7.0-alpha.2, check that you are not using the ^ as you will install 16.7 instead, which doesn't have hooks.

Example package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4", // Make sure version is same as react-dom
    "react-dom": "16.8.4",
    ...
  }
}

2. react-test-renderer is of the same version as react and react-dom

If you are using Jest, ensure that react-test-renderer is of the same version as react and react-dom:

Example package.json:

{
  ...
  "dependencies": {
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-test-renderer": "16.8.4",
    ...
  }
}