Angular项目Jest测试中导入文本文件为字符串报错的解决方法

1. 声明TypeScript类型 #

TypeScript无法识别.txt模块，需添加类型声明：

• 在src目录创建typings.d.ts文件，写入以下内容：

declare module '*.txt' {
  const content: string;
  export default content;
}

• 打开tsconfig.spec.json，确认include数组包含**/*.d.ts，确保类型文件被TypeScript识别：

{
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

2. 配置Jest转换文本文件 #

Jest需要转换器将.txt文件内容转为字符串，有两种实现方式：

方式一：自定义转换器 #

• 在项目根目录创建jest.config.ts文件：

export default {
  preset: 'jest-preset-angular',
  transform: {
    '^.+\\.txt$': '<rootDir>/txt-transformer.js'
  }
};

• 再创建txt-transformer.js文件实现转换逻辑：

module.exports = {
  process(src) {
    return `module.exports = ${JSON.stringify(src)};`;
  }
};

方式二：使用现成依赖 #

• 安装jest-raw-loader依赖：

npm install jest-raw-loader --save-dev

• 修改jest.config.ts的转换配置：

export default {
  preset: 'jest-preset-angular',
  transform: {
    '^.+\\.txt$': 'jest-raw-loader'
  }
};

关联Jest配置到Angular项目 #

修改angular.json中的test节点，指定使用自定义的Jest配置文件：

"test": {
  "builder": "@angular-devkit/build-angular:jest",
  "options": {
    "tsConfig": "tsconfig.spec.json",
    "jestConfig": "jest.config.ts"
  }
}

测试验证 #

完成上述配置后，执行npm test，此时import rawStr from '../../testdata/testdata.txt';语句即可正常将文本文件内容以字符串形式导入。

内容的提问来源于stack exchange，提问作者Bill Lynch