undefined 在将 identity-obj-proxy 与 typescript 与 jest 一起使用时返回

Question

我在我的项目中使用 jest 和 typescript。我使用 identity-obj-proxy 的所有 .ts 文件都未定义，但 .js 文件按预期工作。

这是我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

这是我的笑话配置：

"jest": {
    "unmockedModulePathPatterns": [
      "React"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\.(d\.ts|ts|tsx)$": "ts-jest"
    },
    "testMatch": [
      "**/src/**/*.test.+(ts|tsx|js)"
    ],
    "setupFiles": [
      "raf/polyfill"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "cobertura"
    ],
    "coverageDirectory": "<rootDir>/jest",
    "collectCoverageFrom": [
      "**/*.{ts,tsx}",
      "!**/*.d.{ts,tsx}",
      "!**/*.scss.ts",
      "!**/models/**",
      "!**/node_modules*/**"
      "!**/services/http.ts"
    ],
    "moduleNameMapper": {
      "\.(css|less|scss|sass)$": "identity-obj-proxy",
      "^resx-strings/en-us.json": "<rootDir>/node_modules/@microsoft/sp-core-library/lib/resx-strings/en-us.json"
   },
    "reporters": [
      "default",
      "jest-junit"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 75,
        "lines": 75,
        "statements": 75
      }
    }
  }

我的测试文件(.ts):

import styles from './Somefile.module.scss';

describe('Test identity proxy', () => {
  test('undefined returned', () => {
    expect(styles.notundefined).toBe(undefined);
  }
});

如果我将文件另存为 .js，那么一切似乎都有效，但在 .ts 或 .tsx 文件中无效。

Answer 1

尝试将您的 scss 文件导入为

import * as styles from './Somefile.module.scss';

identity-obj-proxy 存在问题，导致标准导入语法无法在 TypeScript 中使用，但由于某种原因，import * as 符号可以正常工作。

https://github.com/keyanzhang/identity-obj-proxy/issues/8

Answer 2

正如@Nathanael 所怀疑的那样，我相信 identity-object-proxy 模块中存在错误。

但在我的情况下，它在使用时不起作用：

import * as styles from './Somefile.module.scss';

相反，我遵循了@Nathanael 的 link 并且很高兴找到@joaovieira 的解决方法。他创建了自己的身份对象代理版本

module.exports = new Proxy(
  {},
  {
    get: function getter(target, key) {
      if (key === '__esModule') {
        // True instead of false to pretend we're an ES module.
        return true;
      }
      return key;
    },
  },
);

他在 jest.config.js 中包含如下：

module.exports = {
...
  moduleNameMApper: {
    '\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy',
    '\.(css|scss)$': '<rootDir>/.jest/identity-obj-proxy-esm.js',
  }
};

要查看他的完整答案，请转到 https://github.com/keyz/identity-obj-proxy/issues/8#issuecomment-430241345

Answer 3

我正在使用 Jest 24，并且运行遇到了类似的问题（如果不是同一个问题，不同的衣服）

当我使用 ES6 导入在我的 JS 中包含 SASS 或 CSS 文件时，我运行遇到了问题，幸运的是有一个简单的解决方案。

按照 Jest 文档的建议，将以下 t运行sform 添加到您的 package.json

"transform": { 
    "\.(css|less|sass|scss)$": "<rootDir>/test/mock/styleMock.js"
}

根据 Jest 网站上的说明，创建 styleMock.js 文件，但不是 return 只是一个对象或字符串，而是包含一个 'process' 函数，该函数 returns 一个字符串来解决这个问题，就像这样。

module.exports = {
  process: function() {
    return "";
  }
};

如果您的目标只是继续编写测试（或者如果您碰巧像我一样从旧框架迁移过来，则修复），这将安抚 Jest。 css ES6 导入将不再是问题。

希望这提供了对我来说 "almost worked" 以前的解决方案稍微更新的版本！

undefined 在将 identity-obj-proxy 与 typescript 与 jest 一起使用时返回

undefined returned when using identity-obj-proxy with typescript with jest

typescript

jestjs

es6-proxy