如何在Create React App项目中通过Jest正确导入HJSON文件？

嘿，这个问题我太熟了！我之前在Create React App项目里用HJSON的时候也踩过同样的坑——Webpack那边配置好能正常解析，但Jest根本不买账，导入的HJSON直接变成了路径字符串。别慌，按下面的步骤来就能搞定：

1. 安装HJSON解析依赖 #

首先得确保我们有解析HJSON的工具，安装hjson包：

npm install hjson --save-dev
# 或者用Yarn
yarn add hjson --dev

2. 编写自定义Jest转换器 #

Jest默认不知道怎么处理HJSON，所以我们要写一个小脚本帮它解析。在项目根目录下创建一个jest/hjson-transformer.js文件（文件夹如果不存在就新建一个），内容如下：

const hjson = require('hjson');

module.exports = {
  process(src) {
    // 把HJSON字符串解析成JS对象
    const parsedContent = hjson.parse(src);
    // 转换成Jest能识别的模块导出格式
    return `module.exports = ${JSON.stringify(parsedContent)};`;
  },
};

3. 配置Jest识别HJSON文件 #

接下来要告诉Jest遇到.hjson文件时用我们刚才写的转换器处理。根据你的项目情况选择配置方式：

方式一：在package.json里添加Jest配置 #

打开项目根目录的package.json，添加jest字段：

{
  // ...其他配置
  "jest": {
    "transform": {
      "^.+\\.hjson$": "<rootDir>/jest/hjson-transformer.js",
      // 必须保留CRA默认的转换器，否则JS/JSX等文件会无法正常处理
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "react-scripts/config/jest/babelTransform.js",
      "^.+\\.css$": "react-scripts/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "react-scripts/config/jest/fileTransform.js"
    },
    "moduleFileExtensions": [
      // 把hjson加入Jest识别的文件扩展名列表
      "hjson",
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }
}

方式二：使用独立的jest.config.js文件 #

如果更偏好单独的配置文件，在项目根目录创建jest.config.js，内容如下：

module.exports = {
  transform: {
    "^.+\\.hjson$": "<rootDir>/jest/hjson-transformer.js",
    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "react-scripts/config/jest/babelTransform.js",
    "^.+\\.css$": "react-scripts/config/jest/cssTransform.js",
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "react-scripts/config/jest/fileTransform.js"
  },
  moduleFileExtensions: [
    "hjson",
    "web.js",
    "js",
    "web.ts",
    "ts",
    "web.tsx",
    "tsx",
    "json",
    "web.jsx",
    "jsx",
    "node"
  ]
};

4. 测试一下 #

现在运行你的测试命令，比如npm test，你会发现import options from '../assets/options.hjson';终于能拿到解析后的对象，而不是路径字符串了！

如果你的项目已经eject过，配置逻辑也是一样的，只是可能需要调整一下默认转换器的路径，但上面的配置对大多数CRA项目都适用。

内容的提问来源于stack exchange，提问作者Brian Burns