代码转换

Jest 在项目中会以原始版本执行，所以如果你使用了一些 Node 环境不支持的语法（比如 JSX、Vue 模板语法），那么你需要将你的代码翻译成原始版本。 这将与你合作。 与构建浏览器前端代码时所做的翻译工作相同。

Jest提供了支持Js翻译的配置。

() 是一个提供翻译源代码功能的模块。 例如，如果你想在你的业务和测试代码中使用 Node 尚不支持的一些新的语言特性，你可以引入一个代码预处理器来将新版本翻译成当前支持的版本。

Jest 会缓存转换后的结果，并尝试使因多种因素（如文件源被转换、配置信息被修改等）导致的结果失效。

默认值

Jest 附带一个开箱即用的 – . 它将加载项目的 Babel 配置，然后转译所有正确匹配 /\.[jt]sx?$/ 正则表达式的文件（即所有 .js、.jsx、.ts 或 .tsx 文件）。 另外，babel-jest还会注入中提到的Babel插件。

暗示

请记住，如果您想将其与其他代码预处理器一起使用，则必须显式导入默认的 babel-jest 转译器，

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

编写自定义

您可以编写自己的 API，如下所示：

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/next/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>;
};

评论

为了简洁起见，上面的一些类型没有完整列出。 完整的代码可以在 Jest 存储库中找到（到你的 Jest 的正确标签/）。

使用 Jest 时，有多种导入模块的方法 - 使用 JS() 或 (- 静态和动态导入)。 Jest 会根据需要将文件传递给转译器（例如，当检测到 or 时）。 这个过程也称为“翻译”，可以_同步_（使用时）或异步（使用or（）时执行，后者也适用于JS模块）。因此，该接口还暴露了异步和同步程序的两对方法：{Async}和{Async}，后者也可以用来检查我们是否真的需要调用{Async}。

如果是，可以回退到调用，但使用调用。 如果您仅使用 ESM，则异步为 . ，如果有任何代码（来自 ESM），那么您需要 .

请注意，不是 with ，rns 必须是 才能这样做。

Semi- 这是我们传递的标志（参见上面的 ns），但如果是 ESM 或 CJS，则这些标志可用于输出，并且没有同步与异步

不，我们也是如此，所以我们不会浪费可以从磁盘读取它的时间。 您还可以使用@jest/-cache-key-来帮助您实现它

你的，你可以到，一个到。 这是为了让你开个玩笑。

评论

是通过 in * 。 具体来说，t: true表示这可以返回ESM和CJS都支持的()表达式。 并且：true表示支持最高级别的语句，代码将被解释为ESM而不是CJS。阅读ESM和CJS的具体区别

暗示

确保 {Async} 与代码映射，以便在代码中行并测试。 地图也可以工作，但是。

可以通过 --no-cache 来运行 Jest。

类型检查示例

babel-jest 默认会传输文件，但 Babel 不进行类型检查。 如果您需要验证类型，可以使用 ts-jest。

将图像转换为其路径

导入图像是将它们包含在浏览器捆绑包中的一种方法，但它们无效。Jest 中有一个解决方法，即用导入的值替换它们的文件名

.js

const path = require('path');

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

笑话..js

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