Utilizando webpack

Jest puede ser usado en proyectos que usan webpack para gestionar recursos, estilos y compilación. Webpack ofrece algunos desafíos únicos sobre otras herramientas porque se integra directamente con su aplicación para permitir la gestión de hojas de estilo, recursos como imágenes y fuentes, junto con el extenso ecosistema de lenguajes y herramientas de compilación a JavaScript.

Un ejemplo de webpack

Vamos a comenzar con un tipo común de archivo de configuración webpack y traducirlo a una configuración de Jest.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: ['node_modules'],
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.gif$/,
        type: 'asset/inline',
      },
      {
        test: /\.(ttf|eot|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['.js', '.jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

If you have JavaScript files that are transformed by Babel, you can enable support for Babel by installing the babel-jest plugin. Non-Babel JavaScript transformations can be handled with Jest's transform config option.

Manejo de activos estáticos

A continuación, vamos a configurar Jest para utilizar archivos como hojas de estilo e imágenes. Generalmente, estos archivos no son particularmente útiles en las pruebas por lo que con seguridad podemos mockearlos. Sin embargo, si utiliza módulos de CSS entonces es mejor mockear un proxy para las búsquedas de className.

jest.config.js

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

Y mockear los archivos propios:

__mocks__/styleMock.js

module.exports = {};

__mocks__/fileMock.js

module.exports = 'test-file-stub';

Mockear Modulos de CSS

Puede utilizar un ES6 Proxy para mockear Modulos de CSS:

npm

npm install --save-dev identity-obj-proxy

Yarn

yarn add --dev identity-obj-proxy

pnpm

pnpm add --save-dev identity-obj-proxy

A continuación, se devolverán todas tus búsquedas de className del objeto estilos como (p. ej., styles.foobar === 'foobar'). Esto es bastante útil para React Snapshot Testing.

jest.config.js (for CSS Modules)

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

If moduleNameMapper cannot fulfill your requirements, you can use Jest's transform config option to specify how assets are transformed. For example, a transformer that returns the basename of a file (such that require('logo.jpg'); returns 'logo') can be written as:

fileTransformer.js

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },
};

jest.config.js (for custom transformers and CSS Modules)

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};

Si hemos dicho a Jest que omita archivos que coinciden con una extensión de hoja de estilo o imagen, y por el contrario, necesita nuestros archivos de mock. Puedes ajustar a una expresión regular para que coincida con el tipo de archivos de configuración webpack.

tip

Recuerde incluir explícitamente el transformador predeterminado babel-jest, si desea usarlo junto con preprocesadores de código adicionales:

"transform": {
  "\\.[jt]sx?$": "babel-jest",
  "\\.css$": "some-css-transformer",
  ...
}

Configurar Jest para que encuentre nuestros archivos

Ahora que Jest sabe cómo procesar nuestros archivos, tenemos que decirle cómo encontrarlos. For webpack's modules, and extensions options there are direct analogs in Jest's moduleDirectories and moduleFileExtensions options.

jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'jsx'],
  moduleDirectories: ['node_modules', 'bower_components', 'shared'],

  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

info

<rootDir> is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your package.json is located unless you specify a custom rootDir option in your configuration.

Similarly, webpack's resolve.root option functions like setting the NODE_PATH env variable, which you can set, or make use of the modulePaths option.

jest.config.js

module.exports = {
  modulePaths: ['/shared/vendor/modules'],
  moduleFileExtensions: ['js', 'jsx'],
  moduleDirectories: ['node_modules', 'bower_components', 'shared'],
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

And finally, we have to handle the webpack alias. For that, we can make use of the moduleNameMapper option again.

jest.config.js

module.exports = {
  modulePaths: ['/shared/vendor/modules'],
  moduleFileExtensions: ['js', 'jsx'],
  moduleDirectories: ['node_modules', 'bower_components', 'shared'],

  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',

    '^react(.*)$': '<rootDir>/vendor/react-master$1',
    '^config$': '<rootDir>/configs/app-config.js',
  },
};

¡Eso es todo! ¡Eso es todo! webPack es una herramienta compleja y flexible, por lo que tendrás que hacer algunos ajustes para manejar las necesidades específicas de tu aplicación. Afortunadamente para la mayoría de los proyectos, Jest debe ser lo suficientemente flexible como para manejar tu configuración webpack.

tip

For more complex webpack configurations, you may also want to investigate projects such as: babel-plugin-webpack-loaders.

Utilizando webpack

In addition to installing babel-jest as described earlier, you'll need to add @babel/preset-env like so:

npm

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

Yarn

yarn add --dev @babel/preset-env

pnpm

pnpm add --save-dev @babel/preset-env

Then, you'll want to configure Babel as follows:

.babelrc

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

tip

Jest caches files to speed up test execution. If you updated .babelrc and Jest is not working as expected, try clearing the cache by running jest --clearCache.

tip

If you use dynamic imports (import('some-file.js').then(module => ...)), you need to enable the dynamic-import-node plugin.

.babelrc

{
  "presets": [["env", {"modules": false}]],

  "plugins": ["syntax-dynamic-import"],

  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

For an example of how to use Jest with webpack with React, you can view one here.