Hopp til hovedinnhold
Versjon: 30.0

Bruke med webpack

Unofficial Beta Translation

This page was AI-translated by PageTurner (beta). Not officially endorsed by the project. Found an error? Report issue →

Jest kan brukes i prosjekter som benytter webpack for å håndtere ressurser, stiler og kompilering. webpack fører med seg noen unike utfordringer sammenlignet med andre verktøy, siden det integreres direkte med applikasjonen din for å håndtere stilark, ressurser som bilder og fonter, samt det omfattende økosystemet av språk og verktøy som kompileres til JavaScript.

Et webpack-eksempel​

La oss ta utgangspunkt i en vanlig webpack-konfigurasjonsfil og oversette den til et Jest-oppsett.

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

Hvis du har JavaScript-filer som transformeres av Babel, kan du aktivere Babel-støtte ved å installere babel-jest-pluginen. Ikke-Babel JavaScript-transformasjoner kan håndteres med Jest sin transform-konfigurasjonsopsjon.

Håndtering av statiske ressurser​

La oss nå konfigurere Jest til å håndtere ressursfiler som stilark og bilder på en elegant måte. Vanligvis er ikke disse filene spesielt nyttige i tester, så vi kan trygt mocke dem. Men hvis du bruker CSS Modules, er det bedre å mocke en proxy for className-oppslagene dine.

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

Og selve mock-filene:

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

Mocking av CSS Modules​

Du kan bruke en ES6 Proxy for å mocke CSS Modules:

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

Da vil alle dine className-oppslag på stilobjektet returneres uendret (f.eks. styles.foobar === 'foobar'). Dette er svært nyttig for Snapshot Testing i 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',
  },
};

Hvis moduleNameMapper ikke dekker dine behov, kan du bruke Jest sin transform-konfigurasjonsopsjon for å spesifisere hvordan ressurser transformeres. For eksempel kan en transformer som returnerer filnavnet uten filtype (slik at require('logo.jpg'); returnerer 'logo') skrives slik:

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

Vi har bedt Jest om å ignorere filer som matcher en stil- eller bildefiltype, og i stedet bruke våre mock-filer. Du kan justere regulære uttrykk for å matche filtypene som din webpack-konfig håndterer.

tips

Husk å inkludere standard babel-jest-transformeren eksplisitt hvis du ønsker å bruke den sammen med andre kode-preprosessorer:

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

Konfigurere Jest til å finne filene våre​

Nå som Jest vet hvordan den skal behandle filene våre, må vi fortelle den hvordan den skal finne dem. For webpacks modules og extensions-innstillinger finnes det direkte tilsvar i Jest sine moduleDirectories og moduleFileExtensions-opsjoner.

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

<rootDir> er en spesiell token som erstattes av Jest med rotmappen til prosjektet ditt. Oftest vil dette være mappen der din package.json ligger, med mindre du angir en tilpasset rootDir-opsjon i konfigurasjonen din.

Tilsvarende er Jest sin motpart til webpacks resolve.roots (et alternativ til å sette NODE_PATH) 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',
  },
};

Til slutt må vi håndtere webpacks alias. Til dette kan vi bruke moduleNameMapper-opsjonen igjen.

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

Det var alt! webpack er et komplekst og fleksibelt verktøy, så du må kanskje gjøre noen tilpasninger for å dekke applikasjonens spesifikke behov. Heldigvis er Jest for de fleste prosjekter mer enn fleksibel nok til å håndtere din webpack-konfig.

tips

For mer komplekse webpack-oppsett kan du også vurdere å se på prosjekter som: babel-plugin-webpack-loaders.

Bruke med webpack​

I tillegg til å installere babel-jest som beskrevet tidligere, må du legge til @babel/preset-env slik:

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

Deretter bør du konfigurere Babel som følger:

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

Jest mellomlagrer filer for å fremskynde testkjøringen. Hvis du har oppdatert .babelrc og Jest ikke fungerer som forventet, prøv å tømme mellomlageret ved å kjøre jest --clearCache.

tips

Hvis du bruker dynamiske importeringer (import('some-file.js').then(module => ...)), må du aktivere dynamic-import-node-plugin.

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

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

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

For et eksempel på hvordan du bruker Jest med webpack og React, kan du se et her.