Using with webpack

Jest poate fi utilizat în proiecte care folosesc webpack pentru gestionarea fișierelor statice, stiluri şi compilare. webpack oferă nişte provocări unice față de alte instrumente deoarece se integrează direct cu aplicația voastră pentru a permite gestionarea stilurilor, resurselor statice cum ar fi imagini şi fonturi, împreună cu ecosistemul expansiv de compilare în JavaScript a limbajelor şi instrumentelor.

Un exemplu webpack

Să începem cu un fişier de configurare webpack comun pe care să-l traducem într-o configurare 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.

Gestionarea resurselor statice

În continuare, să configurăm Jest să se ocupe de fișierele statice, cum ar fi stilurile şi imaginile. De obicei, aceste fişiere nu sunt deosebit de utile în teste, astfel încât putem liniștiți să le dublăm. Cu toate acestea, dacă utilizaţi module CSS atunci este preferat să dublați un proxy pentru căutările 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',
  },
};

Şi fișierele dubluri:

__mocks__/styleMock.js

module.exports = {};

__mocks__/fileMock.js

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

Dublarea modulelor CSS

Puteți utiliza un ES6 Proxy pentru a mock-ui module CSS:

npm

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

Yarn

yarn add --dev identity-obj-proxy

pnpm

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

Apoi toate căutările pentru className pe obiectul de stiluri va fi returnat ca-atare (de exemplu, styles.foobar === 'foobar'). This is pretty handy for 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(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',
  },
};

I-am specificat lui Jest să ignore fişiere de stil sau imagini, şi în schimb, să includă fișierele noastre mock. Puteţi ajusta expresia regulată pentru a se potrivi tipurilor de fișiere pe care configuratia voastră webpack o gestionează.

tip

Remember to include the default babel-jest transformer explicitly, if you wish to use it alongside with additional code preprocessors:

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

Configurarea Jest pentru a găsi fişierele noastre

Now that Jest knows how to process our files, we need to tell it how to find them. 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',
  },
};

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, Jest's counterpart for Webpack's resolve.roots (an alternative to setting NODE_PATH) is 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',
  },
};

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

Asta e tot! webpack este un instrument complex și flexibil, astfel încât va trebui probabil să faceți unele ajustări care să cuprindă nevoile specifice aplicației voastre. Din fericire pentru cele mai multe proiecte, Jest ar trebui să fie mai mult decât suficient de flexibil pentru a gestiona configurarea voastră webpack.

tip

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

Using with 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.