Transformação de Código

O Jest roda o código do seu projeto como JavaScript, mas se você usa alguma sintaxe não suportada pelo Node.js nativamente (como JSX, tipos do TypeScript, templates do Vue e etc.), então você vai precisar transformar esse código em JavaScript puro, de maneira similar ao que você faria quando construindo para navegadores.

Jest suporta isso através da opção de configuração transform.

Um transformador é um módulo que fornece uma função síncrona para transformar os arquivos de origem. Por exemplo, se você quisesse poder utilizar uma nova funcionalidade da linguagem nos seus módulos ou testes que ainda não é suportada pelo Node, você pode adicionar um de muitos compiladores que compilam uma versão futura do JavaScript para uma atual.

O Jest vai armazenar em cache o resultado de uma transformação e tentar invalidar aquele resultado com base em vários fatores, como a fonte do arquivo que está sendo transformado e a alteração de configuração.

Padrões

Jest ships with one transformer out of the box – babel-jest. Ele carregará a configuração Babel do seu projeto e transformará qualquer arquivo correspondente ao /\.[jt]sx?$/ RegExp (em outras palavras, qualquer . s, .jsx, .ts ou .tsx arquivo). Além disso, babel-jest injetará o plugin Babel, necessário para criar simulação (mock, em inglês), como falado em Simulações em Módulos ES.

tip

Lembre-se de incluir o transformador padrão babel-jest explicitamente, se desejar usá-lo com pré-processadores de código adicionais:

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

Escrevendo transformadores personalizados

You can write your own transformer. The API of a transformer is as follows:

interface TransformOptions<TransformerConfig = unknown> {
  supportsDynamicImport: boolean;
  supportsExportNamespaceFrom: boolean;
  /**
   * The value is:
   * - `false` if Jest runs without Node ESM flag `--experimental-vm-modules`
   * - `true` if the file extension is defined in [extensionsToTreatAsEsm](Configuration.md#extensionstotreatasesm-arraystring)
   * and Jest runs with Node ESM flag `--experimental-vm-modules`
   *
   * See more at https://jestjs.io/docs/29.1/ecmascript-modules
   */
  supportsStaticESM: boolean;
  supportsTopLevelAwait: boolean;
  instrument: boolean;
  /** Cached file system which is used by `jest-runtime` to improve performance. */
  cacheFS: Map<string, string>;
  /** Jest configuration of currently running project. */
  config: ProjectConfig;
  /** Stringified version of the `config` - useful in cache busting. */
  configString: string;
  /** Transformer configuration passed through `transform` option by the user. */
  transformerConfig: TransformerConfig;
}

type TransformedSource = {
  code: string;
  map?: RawSourceMap | string | null;
};

interface SyncTransformer<TransformerConfig = unknown> {
  canInstrument?: boolean;

  getCacheKey?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => string;

  getCacheKeyAsync?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => Promise<string>;

  process: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => TransformedSource;

  processAsync?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => Promise<TransformedSource>;
}

interface AsyncTransformer<TransformerConfig = unknown> {
  canInstrument?: boolean;

  getCacheKey?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => string;

  getCacheKeyAsync?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => Promise<string>;

  process?: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => TransformedSource;

  processAsync: (
    sourceText: string,
    sourcePath: string,
    options: TransformOptions<TransformerConfig>,
  ) => Promise<TransformedSource>;
}

type Transformer<TransformerConfig = unknown> =
  | SyncTransformer<TransformerConfig>
  | AsyncTransformer<TransformerConfig>;

type TransformerCreator<
  X extends Transformer<TransformerConfig>,
  TransformerConfig = unknown,
> = (transformerConfig?: TransformerConfig) => X;

type TransformerFactory<X extends Transformer> = {
  createTransformer: TransformerCreator<X>;
};

note

As definições acima foram encurtadas por brevidade. Full code can be found in Jest repo on GitHub (remember to choose the right tag/commit for your version of Jest).

Há algumas maneiras de importar código para o Jest - usando Common JS (require) ou Módulos ECMAScript (import - que existem em versões estáticas e dinâmicas). Jest passa os arquivos através da transformação de código na demanda (por exemplo, quando um require ou import é avaliado). Este processo, também conhecido como "transpilação", pode acontecer sincronizadamente (no caso de require), ou asynchronously (no caso de import ou import(), o último dos quais também funciona com módulos Common JS). Por esta razão, a interface expõe os dois pares de métodos para processos assíncronos e síncronos: process{Async} e getCacheKey{Async}. O último é chamado para descobrir se precisamos chamar o process{Async}.

Asynchronous transpilation can fall back to the synchronous process call if processAsync is unimplemented, but synchronous transpilation cannot use the asynchronous processAsync call. If your codebase is ESM only, implementing the async variants are sufficient. Otherwise, if any code is loaded through require (including createRequire from within ESM), then you need to implement the synchronous process variant.

Be aware that node_modules is not transpiled with default config, the transformIgnorePatterns setting must be modified in order to do so.

Semi-related to this are the supports flags we pass (see CallerTransformOptions above), but those should be used within the transform to figure out if it should return ESM or CJS, and has no direct bearing on sync vs async

Though not required, we highly recommend implementing getCacheKey as well, so we do not waste resources transpiling when we could have read its previous result from disk. You can use @jest/create-cache-key-function to help implement it.

Instead of having your custom transformer implement the Transformer interface directly, you can choose to export createTransformer, a factory function to dynamically create transformers. This is to allow having a transformer config in your jest config.

note

ECMAScript module support is indicated by the passed in supports* options. Specifically supportsDynamicImport: true means the transformer can return import() expressions, which is supported by both ESM and CJS. If supportsStaticESM: true it means top level import statements are supported and the code will be interpreted as ESM and not CJS. See Node's docs for details on the differences.

tip

Certifique-se de que processs{Async} o método retorna o mapa de origem juntamente com o código transformado, portanto, é possível relatar informação de linha com precisão na cobertura de código e erros de teste. Inline source maps also work but are slower.

Durante o desenvolvimento de um transformador pode ser útil executar Jest com --no-cache para frequentemente delete cache.

Exemplos

TypeScript com verificação de tipo

While babel-jest by default will transpile TypeScript files, Babel will not verify the types. If you want that you can use ts-jest.

Transformando imagens em seu path

Importing images is a way to include them in your browser bundle, but they are not valid JavaScript. One way of handling it in Jest is to replace the imported value with its filename.

fileTransformer.js

const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
    };
  },
};

jest.config.js

module.exports = {
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};