开玩笑的单元测试问题:“未找到模块”

Jest目前无法通过测试,因为它找不到组件内部调用的模块:

 FAIL  tests/Unit/VHeaderBar.spec.ts
  ● Test suite failed to run

    Cannot find module '@@/public/assets/images/placeholder.png' from 'VHeaderBar.vue'



      at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:221:17)
      at src/components/VHeaderBar.vue:687:18
      at Object.<anonymous> (src/components/VHeaderBar.vue:749:3)

案例

NuxtJs 中,@@标记指向 root 目录,因为在最终解决方案中,我们要将图像存储在公用文件夹或存储文件夹中,位于项目的根目录。

运行测试时,玩笑检查src文件夹,然后尝试挂载从根目录存储的图像,找不到它们。

我尝试了多种解决此问题的方法,但似乎找不到解决方法。 这是我已经尝试过的内容的简短列表:

  • 使用Jest配置文件中的regex选项,更改moduleNameMapper来检查图像文件并将其引导到正确的文件夹。
  • 我在Stack上阅读了一些有关使用“模拟”文件夹的内容,该文件夹通过javascript导出图像文件,但这没用。
  • 使用Jest配置文件中的modulePaths选项。
  • tsconfig.js中为 assets 文件夹创建一个别名,并在moduleNameMapper
  • 中使用它
  • 在VueJS组件和测试文件中尝试了另一种方法来加载资产,这破坏了编译过程(因此我将其还原了)。

当前Jest配置文件

module.exports = {
    moduleFileExtensions: [
        "ts","tsx","vue","js","json"
    ],watchman: false,moduleNameMapper: {
        "/\.(gif|jpg|jpeg|tiff|png)$/i": "<rootDir>/public/assets/images/$1","^@/(.*)$": "<rootDir>/src/$1","^~/(.*)$": "<rootDir>/src/$1","^~~/(.*)$": "<rootDir>/src/$1"
    },transform: {
        // process js with `babel-jest`
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest",// process `*.vue` files with `vue-jest`
        ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",// process `*.ts` files with `ts-jest`
        "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest",},snapshotSerializers: [
        "<rootDir>/node_modules/jest-serializer-vue"
    ],collectCoverage: true,collectCoverageFrom: [
        "<rootDir>/src/components/**/*.vue","<rootDir>/src/pages/**/*.vue","<rootDir>/src/layouts/**/*.vue"
    ],testMatch: [
        '**/tests/Unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ],}

当前文件夹结构(仅用于测试的文件夹)

project folder
- public
-- assets
--- **images**

- src
-- components
--- **mounted component** (works)

- tests
-- Unit
--- mountedComponent.spec.ts

有什么建议吗?

我可以修复jest.config吗?

语法是否有问题?

我必须修复tsconfig吗?

dubofengmvp 回答:开玩笑的单元测试问题:“未找到模块”

我遇到了类似的问题,原因是打字稿无法导入该文件。

我已经通过向files.d.ts添加文件类型定义解决了该问题:

declare module "*.pdf" {
  const file: Buffer;
  export default file;
}

declare module "*.jpeg" {
  const src: string;
  export default src;
}

declare module "*.png" {
  const src: string;
  export default src;
}

tsconfig.json中引用此文件:

{
  "compilerOptions": {
    /* ... */
  },"files": ["./src/@types/files.d.ts"],"include": ["src/**/*"],"exclude": ["node_modules"]
}

并将文件转换添加到jest.config.js

module.exports = {
  preset: "ts-jest",testEnvironment: "node",roots: ["<rootDir>/src/"],moduleNameMapper: {
    "@app/(.*)": "<rootDir>/src/$1","@lib/(.*)": "<rootDir>/src/lib/$1",},transform: { // Transforms here
    "\\.(gql|graphql)$": "@jagi/jest-transform-graphql","\\.(html|html|txt|pem|key)$": "./jest-transform-text.js","\\.(p12|pdf|otf|ttf)$": "./jest-transform-buffer.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"

  },coverageReporters: ["text","lcov"],};

转换文件示例:

// jest-transform-buffer.js

"use strict";
const fs = require("fs");
module.exports = {
  process(src,filename) {
    const data = fs.readFileSync(filename,"hex");
    return (
      'module.exports=Buffer.from("' +
      data +
      '","hex");module.exports.default=module.exports;'
    );
  },};

对于通过create react应用程序生成的图像(或仅需要文件名的其他文件):

'use strict';

const path = require('path');
const camelcase = require('camelcase');

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html

module.exports = {
  process(src,filename) {
    const assetFilename = JSON.stringify(path.basename(filename));

    if (filename.match(/\.svg$/)) {
      // Based on how SVGR generates a component name:
      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
      const pascalCaseFilename = camelcase(path.parse(filename).name,{
        pascalCase: true,});
      const componentName = `Svg${pascalCaseFilename}`;
      return `const React = require('react');
      module.exports = {
        __esModule: true,default: ${assetFilename},ReactComponent: React.forwardRef(function ${componentName}(props,ref) {
          return {
            $$typeof: Symbol.for('react.element'),type: 'svg',ref: ref,key: null,props: Object.assign({},props,{
              children: ${assetFilename}
            })
          };
        }),};`;
    }

    return `module.exports = ${assetFilename};`;
  },};
本文链接:https://www.f2er.com/3109671.html

大家都在问