告诉jest处理Vite的“?raw”语法

Question

Vite 允许使用

将文件作为原始字符串导入

import foo from "foo.txt?raw"

但是，jest 抱怨它找不到该文件。我找到了 jest-raw-loader，但我不知道如何告诉它将原始加载应用于“？raw”语法。

Answer 1

我将以下内容添加到

moduleNameMapper

，它起作用了。

"moduleNameMapper": {
  ".*\\.txt\\?raw": "jest-raw-loader"
}

Answer 2

为了避免引入对

jest-raw-loader

的依赖，您可以将自己的转换保留在项目本地：

// jest.config.cjs

moduleNameMapper: {
  '\\?raw$': '<rootDir>/test-setup/__mocks__/raw.cjs', 
},
transform: {
  '\\?raw$': '<rootDir>/test-setup/rawTransform.cjs',
}

（👆 将这些路径更新为您的路径）

还有自定义转换，它只是返回一个字符串来代替您的

?raw

文件：

// test-setup/rawTransform.cjs

module.exports = {
  process() {
    return { code: `module.exports = '';` };
  },
  getCacheKey() {
    // The output is always the same, so use a literal cache key.
    return 'rawTransform';
  },
};

Answer 3

在 2024 年（使用 Jest 28+）执行此操作需要更新版本的 jest-raw-loader，该版本上次更新是在 7 年前。 我和@glen/jest-raw-loader一起去了。

import header_file_source from "externals/templates/dynamic-header.js.hbs?raw";

然后在

jest.config.mjs

：

moduleNameMapper: {
    // strip Vite's ?raw import syntax, then transform (see below)
    'externals/(.*)\\?raw$': '<rootDir>/externals/$1',
    // enable app (@) and root (~) shortcuts in imports
    '@/(.*)': '<rootDir>/app/$1',
    '~/(.*)': '<rootDir>/$1',
    // mock imported CSS files
    '\\.(css|less|scss|sass)$': '<rootDir>/mocks/cssFileMock.js'
},

在末尾添加并删除 ?raw，然后：

transform: {
    // all <rootDir>/externals/$1 should be loaded as raw files
    '^.+/(externals)/.+': '@glen/jest-raw-loader'
},

此外，请注意要导入的文件的扩展名。 我希望所有内容都是原始文本（因此我选择了 jest-raw-loader）。 虽然我发现

.hbs

和

.min

作为字符串到达，但

.js

产生了一个对象。