解决 Jest 对于文件类型转换问题的思路及解决方法

在前端开发中，Jest 是一款非常受欢迎的测试框架。但是，Jest 在处理某些文件类型时会出现问题，例如图片、字体等文件。本文将探讨这些问题，并提供解决方案。

问题描述

Jest 在处理文件类型时，会将文件的内容解析成字符串或者 Buffer，导致测试失败。例如，以下代码尝试测试一个图片文件：

import logo from "./logo.png";

describe("Logo", () => {
  it("renders without crashing", () => {
    expect(logo).toBeTruthy();
  });
});

运行测试会得到以下错误：

● Logo › renders without crashing

  expect(received).toBeTruthy()

  Received: ""

    at Object.<anonymous> (src/App.test.js:6:20)

这是因为 Jest 将图片文件解析成了空字符串。

解决方法

方法一：使用 file-loader

file-loader 是一款处理文件的 webpack 加载器。它可以将文件复制到输出目录，并返回公共 URL。我们可以使用 file-loader 将图片文件转换成可用的模块。首先，安装 file-loader：

npm install file-loader --save-dev

在 Jest 的配置文件（通常是 jest.config.js）中添加以下代码：

module.exports = {
  // ...
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/fileMock.js",
    "\\.(css|less)$": "<rootDir>/styleMock.js"
  }
}

在项目根目录下创建 fileMock.js：

// fileMock.js
module.exports = "test-file-stub";

这个文件会作为一个 mock 文件，当导入图片文件时使用。

然后，我们需要告诉 webpack 使用 file-loader。在 Jest 配置文件中添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif)$": "<rootDir>/fileMock.js",
    "\\.(css|less)$": "<rootDir>/styleMock.js"
  },
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.svg$": "<rootDir>/svgTransform.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
  globals: {
    __DEV__: true
  }
};

最后，我们需要将 .png 文件转换成 .js 文件，并返回路径与模块。

在项目根目录下创建 pngTransform.js：

const path = require("path");

module.exports = {
  process(src, filename, config, options) {
    return "module.exports = " + JSON.stringify(path.basename(filename)) + ";";
  }
};

重新运行测试，所有文件都应该可以正确处理。

方法二：使用 jest-transform-stub

jest-transform-stub 是一个 Jest 转换器，可以将非 JavaScript 文件转换为空的模块。首先，安装 jest-transform-stub：

npm install jest-transform-stub --save-dev

在 Jest 配置文件中添加以下代码：

module.exports = {
  // ...
  transform: {
    "\\.(js|jsx|ts|tsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif)$": "jest-transform-stub"
  }
};

重新运行测试，就可以正确处理图片文件了。

总结

以上就是解决 Jest 对于文件类型转换问题的两种方法。当你在使用 Jest 进行前端开发时，可能会遇到类似的问题。希望本文的解决方法对你有帮助。注意，本文中的设定仅为示例，具体的实现还需根据项目需求进行调整。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654599fb7d4982a6ebf3cc2b