Jest Configuration

To change your env's default Jest configuration, or to replace your current tester with Jest, implement the following in your env:

/* your base env. in this example, react-env. */
import { ReactEnv } from '@teambit/react.react-env';

import type { EnvHandler } from '@teambit/envs';
import { JestTask, JestTester } from '@teambit/defender.jest-tester';
import { Tester } from '@teambit/tester';

export class MyEnv extends ReactEnv {
  name = 'my-env';

  /**
   * replace the env's default tester
   * (for testing in development)
   */
  tester(): EnvHandler<Tester> {
    return JestTester.from({
      jest: require.resolve('jest'),
      config: require.resolve('./config/jest.config'),
    });
  }

  build() {
    return super.build().replace([
      /**
       * replace the env's default Jest task
       * (for testing during build)
       */
      JestTask.from({
        config: require.resolve('./config/jest.config'),
        jest: require.resolve('jest'),
      }),
    ]);
  }
}

export default new MyEnv();
Copied

The example above shows Jest using the same config file for testing during development and during build. Create an additional config file to set each with a different configuration.

Run the following to compile your env after making changes to your env's Jest configuration:

$bit compile

Copied

Bit's official frontend envs configure Jest to run tests in a browser-like environment ({ testEnvironment: "jsdom"}). In addition to that, @testing-library/jest-dom is used to extend jest with additional matchers to test your DOM state (such as .toBeDisabled, .toBeInTheDocument, etc.).

For example, see React's Jest configuration.

Bit's official envs provide pre-made configuration for ESM and CommonJS modules. Head over to your env's jest.config.js file, to use the config you prefer:

// @filename: my-env/config/jest.config.js

const { esmConfig } = require('@teambit/react.jest.react-jest');

module.exports = {
  ...esmConfig,
};
Copied

Make sure to implement, in your env, the Jest env handler and Jest build task, for the config to take effect.

Jest can be configured to a module type different than the one your compiler outputs. In that case, Jest would compile the code that was compiled by your complier, into the module type used by it.

Since code in the node_modules directory is almost always compiled, Jest is configured, by default, not to compile it.

This can cause issues when your components do require Jest to compile them before they are tested. For example, when your components are compiled by your compiler to ES Modules but your Jest tester is configured to test CommonJS.

Components consume other components using their absolute package name, which resolves to the node_modules directory. That means Jest will only compile your component, and not its dependency (another component), since that dependency is consumed from the node_modules directory.

To exclude Bit components from Jest's "transform ignore" pattern, so that it they are compiled ("transformed") by it, set the excludeComponents property to true. To exclude additional packages from the "transform ignore" pattern, add them to the packagesToExclude array.

```js
// @filename: my-env/config/jest.config.js

const {
  generateNodeModulesPattern,
} = require('@teambit/dependencies.modules.packages-excluder');
const packagesToExclude = ['a-package-to-exclude'];

/**
 * by default, jest excludes all node_modules from the transform (compilation) process.
 * the following config excludes all node_modules, except for Bit components, style modules, and the packages that are listed.
 */
module.exports = {
  ...jestConfig,
  transformIgnorePatterns: [
    '^.+.module.(css|sass|scss)$',
    generateNodeModulesPattern({
      packages: packagesToExclude,
      excludeComponents: true,
    }),
  ],
};
Copied

Run the following to install the packages-excluder (which is shown being used in the configuration above):

$bit install @teambit/dependencies.modules.packages-excluder

Copied

To learn more, see this demo env.