将identity obj proxy与带有jest的typescript一起使用时返回未定义

我在我的项目中使用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配置：

"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
      }
    }
  }

---

如果我将文件另存为.js，那么一切似乎都正常，但在.ts或.tsx文件中却不正常。

尝试将您的scss文件导入为

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

identity obj proxy存在一个问题，它阻止标准导入语法在TypeScript中工作，但出于某种原因，import*as表示法工作正常

---

正如@Nathanel所怀疑的，我相信identity对象代理模块中有一个bug

然而，在我的情况下，当使用：

将*作为样式从“/Somefile.module.scss”导入

相反，我跟随@Nathanel的链接，很高兴找到@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',
  }
};

---

要查看他的完整答案，请转到

我使用的是Jest 24，我遇到了类似的问题，如果不是同一个问题在不同的衣服上

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

按照Jest文档的建议，将以下转换添加到package.json中

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

如果您的目标是继续编写测试或修复（如果您碰巧从像我一样的旧框架迁移），那么这将平息您的玩笑。css ES6导入将不再是一个问题

---

希望这提供了一个稍微更新版本的以前的解决方案，几乎为我工作

这也没有解决问题。我在这里为SPFx创建了一个问题，直到SPFx 1.8.0才起作用。在SPFx 1.8.0中，他们引入了较新的typescript版本，其中支持esModuleInterop:true，这使得此解决方案变得多余。仍然没有esModuleInterop:true这应该是正确的答案。从何处导入{dep1，dep2}是什么情况

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

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