Saltar al contenido principal
Versión: Siguiente

Uso con webpack

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Jest puede usarse en proyectos que utilizan webpack para gestionar recursos, estilos y compilación. webpack sí presenta desafíos únicos frente a otras herramientas porque se integra directamente con tu aplicación para permitir gestionar hojas de estilo, recursos como imágenes y fuentes, junto con el extenso ecosistema de lenguajes y herramientas que compilan a JavaScript.

Un ejemplo con webpack​

Comencemos con un archivo de configuración típico de webpack y adaptémoslo para 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',
    ],
  },
};

Si tienes archivos JavaScript transformados por Babel, puedes activar el soporte para Babel instalando el plugin babel-jest. Las transformaciones JavaScript que no sean de Babel pueden manejarse con la opción transform de Jest.

Manejo de recursos estáticos​

Ahora configuremos Jest para manejar correctamente archivos de recursos como hojas de estilo e imágenes. Normalmente, estos archivos no son particularmente útiles en pruebas, así que podemos simularlos sin problemas. Sin embargo, si usas CSS Modules, es mejor simular 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 los propios archivos simulados:

__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';

Simulación de CSS Modules​

Puedes usar un Proxy de ES6 para simular CSS Modules:

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

Entonces todas tus búsquedas de className en el objeto de estilos devolverán el valor literal (ej. styles.foobar === 'foobar'). Esto es bastante útil para Pruebas de Instantáneas en React.

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',
  },
};

Si moduleNameMapper no satisface tus necesidades, puedes usar la opción transform de Jest para especificar cómo se transforman los recursos. Por ejemplo, un transformador que devuelve el nombre base de un archivo (de modo que require('logo.jpg'); devuelva 'logo') podría escribirse así:

fileTransformer.js
const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
    };
  },
};
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',
  },
};

Hemos indicado a Jest que ignore archivos con extensiones de hojas de estilo o imágenes, y en su lugar, utilice nuestros archivos simulados. Puedes ajustar la expresión regular para que coincida con los tipos de archivo que maneja tu configuración de webpack.

consejo

Recuerda incluir explícitamente el transformador predeterminado babel-jest si deseas usarlo junto con otros preprocesadores de código:

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

Configurar Jest para encontrar nuestros archivos​

Ahora que Jest sabe cómo procesar nuestros archivos, debemos indicarle cómo encontrarlos. Para las opciones modules y extensions de webpack, existen equivalentes directos en las opciones moduleDirectories y moduleFileExtensions de Jest.

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',
  },
};
nota

<rootDir> es un token especial que Jest reemplaza por la raíz de tu proyecto. Normalmente será la carpeta donde se encuentra tu package.json, a menos que especifiques una opción personalizada rootDir en tu configuración.

De manera similar, la contraparte en Jest para resolve.roots de Webpack (alternativa a establecer NODE_PATH) es modulePaths.

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',
  },
};

Finalmente, debemos manejar los alias de webpack. Para eso, podemos usar nuevamente la opción moduleNameMapper.

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! webpack es una herramienta compleja y flexible, así que quizás necesites ajustes para cubrir las necesidades específicas de tu aplicación. Afortunadamente, para la mayoría de proyectos Jest es lo suficientemente flexible para manejar tu configuración de webpack.

consejo

Para configuraciones más complejas de webpack, también podrías investigar proyectos como: babel-plugin-webpack-loaders.

Uso con webpack​

Además de instalar babel-jest como se mencionó anteriormente, deberás agregar @babel/preset-env así:

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

Luego, querrás configurar Babel de la siguiente manera:

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

Jest almacena archivos en caché para acelerar la ejecución de pruebas. Si actualizaste .babelrc y Jest no funciona como esperabas, intenta borrar la caché ejecutando jest --clearCache.

consejo

Si usas importaciones dinámicas (import('some-file.js').then(module => ...)), necesitas habilitar el plugin dynamic-import-node.

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

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

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

Para ver un ejemplo de cómo usar Jest con webpack en React, puedes consultar uno aquí.