jestjs - คืนค่า undefined เมื่อใช้ identity-obj-proxy กับ typescript ร่วมกับ jest

ฉันกำลังใช้ Jest กับ TypeScript ในโปรเจกต์ของฉัน ฉันได้รับค่า undefined สำหรับไฟล์ .ts ทั้งหมดของฉันเมื่อใช้ identity-obj-proxy แต่ไฟล์ .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
      }
    }
  }

ไฟล์ทดสอบของฉัน(.ts):

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

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

ถ้าฉันบันทึกไฟล์เป็น .js ทุกอย่างดูเหมือนจะใช้งานได้ แต่ไม่ใช่ในไฟล์ .ts หรือ .tsx

คำตอบ #1

ตามที่ @Nathanael สงสัย ฉันเชื่อว่ามีบั๊กในโมดูล identity-object-proxy

ในกรณีของฉัน อย่างไรก็ตามมันไม่ได้ผลเมื่อใช้:

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

แทนที่จะเป็นเช่นนั้น ฉันติดตามลิงก์ของ @Nathanael และดีใจที่พบวิธีแก้ของ @joaovieira เขาได้สร้างเวอร์ชันของตัวเองของ identity-object-proxy

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

คำตอบ #2

ฉันกำลังใช้ Jest 24 และฉันเจอปัญหาแบบเดียวกัน (ถ้าไม่ใช่ปัญหาเดียวกันแต่ในรูปแบบที่ต่างกัน)

เมื่อฉันรวมไฟล์ SASS หรือ CSS ใน JS ของฉันโดยใช้การนำเข้า ES6 ฉันเจอปัญหา โชคดีที่มีวิธีแก้ปัญหาที่ง่าย

ตามที่เอกสารของ Jest แนะนำ ให้เพิ่มการแปลงต่อไปนี้ในไฟล์ package.json ของคุณ

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

ต่อจากคำแนะนำในเว็บไซต์ Jest ให้สร้างไฟล์ styleMock.js แต่แทนที่จะคืนค่าเพียงอ็อบเจ็กต์หรือสตริง ให้รวมฟังก์ชัน 'process' ที่คืนค่าสตริงเพื่อแก้ปัญหา คล้ายกับสิ่งนี้

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

นี่จะช่วยให้ Jest สบายใจถ้าจุดประสงค์ของคุณคือแค่ดำเนินการเขียนการทดสอบต่อไป (หรือแก้ไขถ้าคุณบังเอิญกำลังย้ายมาจากเฟรมเวิร์กเวอร์ชันเก่าเหมือนที่ฉันเคยทำ) การนำเข้า CSS แบบ ES6 จะไม่เป็นปัญหาอีกต่อไป

หวังว่านี่จะเป็นเวอร์ชันที่อัปเดตเล็กน้อยของวิธีแก้ปัญหาก่อนหน้าที่ "เกือบใช้ได้" สำหรับฉัน!