next

Edit

Using with 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: {
    loaders: [
      {exclude: ['node_modules'], loader: 'babel', test: /\.jsx?$/},
      {loader: 'style-loader!css-loader', test: /\.css$/},
      {loader: 'url-loader', test: /\.gif$/},
      {loader: 'file-loader', test: /\.(ttf|eot|svg)$/},
    ],
  },
  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.

// package.json
{
  "jest": {
    "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:

yarn add --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.

// package.json (for CSS Modules)
{
  "jest": {
    "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"
    }
  }
}

Aviso que Proxy está habilitado en Node 6 por defecto. Si aún no estas utilizando Node 6, asegúrate de que invocas Jest usando node --harmony_proxies node_modules/.bin/jest.

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

// package.json (for custom transformers and CSS Modules)
{
  "jest": {
    "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.

Nota: Si utiliza babel-jest con preprocesadores de código adicional, debe definir explícitamente babel-jest como un transformador para el código JavaScript y asignar archivos .js en el módulo de babel-jest.

"transform": {
  "\\.js$": "babel-jest",
  "\\.css$": "custom-transformer",
  ...
}

Configurar Jest para que encuentre nuestros archivos

Ahora que Jest sabe cómo procesar nuestros archivos, tenemos que decirle cómo encontrarlos. Para modulesDirectories de webpack y extensions allí las opciones son análogos directos en opciones de Jest moduleDirectories y moduleFileExtensions.

// package.json
{
  "jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

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

Note: <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.

// package.json
{
  "jest": {
    "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.

// package.json
{
  "jest": {
    "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, 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.

Nota: Para las más complejas configuraciones webpack, también puedes investigar proyectos tales como: babel-plugin-webpack-loaders.

Utilizando webpack 2

webPack 2 ofrece soporte nativo para los módulos de ES. However, Jest runs in Node, and thus requires ES modules to be transpiled to CommonJS modules. As such, if you are using webpack 2, you most likely will want to configure Babel to transpile ES modules to CommonJS modules only in the test environment.

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

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Nota: Jest cachea archivos para acelerar la ejecución de los tests. Si ha actualizado .babelrc y Jest sigue sin funcionar, intente ejecutar Jest con --no-cache.

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, Redux, and Node, you can view one here.

← ECMAScript Modules Usar con puppeteer →