How to use invalidTeardownWithNamedExport method in Jest

So it looks like my assertions, using Enzyme, on expect are not setup. Upon reading the Enzyme docs further my setup is only using the Adapter allowing for easier rendering/mounting of components. I do not have the ability to use the Enzyme assertions from the docs because they are not installed. Rather to answer this particular problem I have to use the Jest assertions.

describe('<Typography />', () => {
  it('renders h1', () => {
    const wrapper = mount(<Typography variant="h1" />);
    const elem = wrapper.find('h1');
    expect(elem.length).toBe(1);
  });
});

https://jestjs.io/docs/en/expect

No, jest globalSetup and globalTeardown files don't necessarily get run in the same process as your tests. This is because jest parallelises your tests and runs each test file in a separate process, but there is only one global setup/teardown phase for the combined set of test files.

You can use setupFiles to add a file that gets run in process with each test file. In the setupFiles file you can put:

afterAll(() => app.destroy());

Your jest config is just

module.exports = {
  testEnvironment: 'node',
  roots: [
    '<rootDir>/src'
  ],
  transform: {
    '^.+\\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'node'
  ],
  setupFiles: ['<rootDir>/src/testSetup.ts']
};

1. Install required dependencies:

yarn add --dev babel-jest @babel/core @babel/preset-env

or

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

2. Create babel.config.js in your main folder and paste it there:

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

3. Make sure all your jest settings in package.json and jest.config.js are set to default.

I figured it out. By default jest doesn't transform ES6 js code from node_modules. In my case, the package react-navigation module need to be translated. So I added transformIgnorePatterns to my jest configuration and everything worked:

{
  "preset": "react-native",
  "setupFiles": ["./test/setup.js"],
  "globals": {
    "__DEV__": true
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|react-navigation)/"
  ]
}

https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

Given that Typescript is structurally typed, it should be possible to simply construct an object literally that matches the interface of the A class and pass that into class B.

For example:

const mockA: jest.Mocked<A> = {
  getSomething: jest.fn()
};

const b = new B(mockA);

expect(mockA.getSomething)
    .toHaveBeenCalled();

This should not generate type errors given mockA exactly matches the interface of class A.

To mock the return value of A’s methods, refer to mocking individual functions with Jest.

This proves to be simpler and more succinct than attempting to mock the entire module. Since you’ve used IoC as a pattern, mocking the module is not necessary.

You also have a typo. Class B assigns to an instance variable with only one underscore but then calls the method on an instance variable with two underscores.

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 }]],
        },
      },
    },
  ],
},

Create-react-app comes with Jest built-in, there is no need to install it additionally.

You have a version conflict now because you installed it additionally. To fix it, revert your changes to package.json.

You can use expect.extend() to do just that. If you're using create-react-app, you can put this example code below in the setupTests.ts so it can be applied to all of the tests you run:

expect.extend({
  toBeWithinRange(received, min, max) {
    const pass = received >= min && received <= ceiling
    return {
      message: () =>
        `expected ${received} to be in range ${floor} - ${ceiling}`,
      pass,
    }
  },
})

Usage

it('should fail', () => {
  expect(13).toBeWithinRange(1, 10)
})

When running the test above this is the output:

But we can do better than that. Look at how the built-in matchers display the error message:

As you can see the error is easier to read because the expected and received values have different colors and there is a matcher hint above to denote which one is which.

To do that we need to install this package jest-matcher-utils and import a couple of methods to pretty print the matcher hint and values:

import { printExpected, printReceived, matcherHint } from "jest-matcher-utils"

const failMessage = (received, min, max) => () => `${matcherHint(
  ".toBeWithinRange",
  "received",
  "min, max"
)}

Expected value to be in range:
  min: ${printExpected(min)}
  max: ${printExpected(max)}
Received: ${printReceived(received)}`

expect.extend({
  toBeWithinRange(received, min, max) {
    const pass = received >= min && received <= max

    return {
      pass,
      message: failMessage(received, min, max),
    }
  },
})

Now it looks way better and can help you identify the problem quicker

However there is a small bug in the code above, when you negate the assertion

expect(3).not.toBeWithinRange(1, 10)

The output is .toBeWithinRange instead of .not.toBeWithinRange:

expect(received).toBeWithinRange(min, max)

Expected value to be in range:
  min: 1
  max: 10
Received: 3

To fix that, you can conditionally add the negative word based on the pass value

const failMessage = (received, min, max, not) => () => `${matcherHint(
  `${not ? ".not" : ""}.toBeWithinRange`,
  "received",
  "min, max"
)}

Expected value${not ? " not " : " "}to be in range:
  min: ${printExpected(min)}
  max: ${printExpected(max)}
Received: ${printReceived(received)}`

toBeWithinRange(received, min, max) {
  const pass = received >= min && received <= max

  return {
    pass,
    message: failMessage(received, min, max, pass),
  }
},

Now rerun the test again, you will see this:

Pass if false

expect(3).not.toBeWithinRange(1, 10)

expect(received).not.toBeWithinRange(min, max)

Expected value not to be in range:
  min: 1
  max: 10
Received: 3

Pass if true

expect(13).toBeWithinRange(1, 10)

expect(received).toBeWithinRange(min, max)

Expected value to be in range:
  min: 1
  max: 10
Received: 13

Update Package.json(Remove "react-app/jest" from extends array

"eslintConfig": { "extends": [ "react-app" ] },

if you are using eslintconfig delete that or remove the react-app/jest from there extends array and keep only react-app Run npm install and check again It should work.