Usando com webpack

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

O Jest pode ser usado em projetos que utilizam webpack para gerenciar recursos, estilos e compilação. O webpack realmente apresenta alguns desafios únicos em comparação com outras ferramentas porque se integra diretamente com sua aplicação para permitir o gerenciamento de folhas de estilo, recursos como imagens e fontes, além do amplo ecossistema de linguagens e ferramentas que compilam para JavaScript.

Um exemplo com webpack

Vamos começar com um tipo comum de arquivo de configuração do webpack e traduzi-lo para uma configuração do 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',
    ],
  },
};

Se você tem arquivos JavaScript transformados pelo Babel, pode habilitar o suporte ao Babel instalando o plugin babel-jest. Transformações JavaScript que não são do Babel podem ser tratadas com a opção de configuração transform do Jest.

Tratando recursos estáticos

A seguir, vamos configurar o Jest para lidar adequadamente com arquivos de recursos como folhas de estilo e imagens. Geralmente, esses arquivos não são particularmente úteis em testes, então podemos simular seu comportamento com segurança. No entanto, se você estiver usando CSS Modules, é melhor simular um proxy para suas pesquisas 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',
  },
};

E os próprios arquivos de simulação:

__mocks__/styleMock.js

module.exports = {};

__mocks__/fileMock.js

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

Simulando CSS Modules

Você pode usar um Proxy ES6 para simular CSS Modules:

npm

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

Yarn

yarn add --dev identity-obj-proxy

pnpm

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

Bun

bun add --dev identity-obj-proxy

Então, todas as suas pesquisas de className no objeto de estilos serão retornadas como estão (por exemplo, styles.foobar === 'foobar'). Isso é bastante útil para Testes de Snapshot em 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',
  },
};

Se o moduleNameMapper não puder atender às suas necessidades, você pode usar a opção de configuração transform do Jest para especificar como os recursos são transformados. Por exemplo, um transformador que retorna o nome base de um arquivo (de modo que require('logo.jpg'); retorne 'logo') pode ser escrito como:

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

Nós dissemos ao Jest para ignorar arquivos que correspondam a extensões de folha de estilo ou imagem e, em vez disso, carregar nossos arquivos de simulação. Você pode ajustar a expressão regular para corresponder aos tipos de arquivo que sua configuração do webpack lida.

"message": "dica"

Lembre-se de incluir explicitamente o transformer padrão babel-jest se quiser usá-lo junto com outros pré-processadores:

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

Configurando o Jest para encontrar nossos arquivos

Agora que o Jest sabe como processar nossos arquivos, precisamos dizer como encontrá-los. Para as opções modules e extensions do webpack, existem análogos diretos nas opções moduleDirectories e moduleFileExtensions do 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',
  },
};

"message": "nota"

<rootDir> é um token especial que o Jest substitui pela raiz do seu projeto. Na maioria das vezes, isso será a pasta onde seu package.json está localizado, a menos que você especifique uma opção rootDir personalizada em sua configuração.

Da mesma forma, a contraparte do Jest para resolve.roots do webpack (uma alternativa para configurar 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',
  },
};

E finalmente, temos que lidar com o alias do webpack. Para isso, podemos usar novamente a opção 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',
  },
};

Pronto! O webpack é uma ferramenta complexa e flexível, então você pode precisar fazer alguns ajustes para atender às necessidades específicas da sua aplicação. Felizmente, para a maioria dos projetos, o Jest deve ser flexível o suficiente para lidar com sua configuração do webpack.

"message": "dica"

Para configurações de webpack mais complexas, você também pode querer investigar projetos como: babel-plugin-webpack-loaders.

Usando com webpack

Além de instalar o babel-jest como descrito anteriormente, você precisará adicionar o @babel/preset-env da seguinte forma:

npm

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

Yarn

yarn add --dev @babel/preset-env

pnpm

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

Bun

bun add --dev @babel/preset-env

Então, você vai querer configurar o Babel da seguinte maneira:

.babelrc

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

"message": "dica"

O Jest armazena arquivos em cache para acelerar a execução dos testes. Se você atualizou o .babelrc e o Jest não está funcionando como esperado, tente limpar o cache executando jest --clearCache.

"message": "dica"

Se você usa imports dinâmicos (import('some-file.js').then(module => ...)), precisa habilitar o plugin dynamic-import-node.

.babelrc

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

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

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

Para ver um exemplo de como usar o Jest com webpack e React, você pode conferir este repositório.