undefined возвращается при использовании identity-obj-proxy с typescript с шуткой

Я использую шутку с машинописным текстом в своих проектах. Я получаю неопределенность для всех моих файлов .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": {
    "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.


typescript jestjs es6-proxy
person Abhishek Raj    schedule 15.10.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Попробуйте импортировать файл scss как

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

Есть проблема с identity-obj-proxy, из-за которой стандартный синтаксис импорта не работает в TypeScript, но по какой-то причине нотация import * as работает нормально.

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

person Nathanael    schedule 19.10.2018
comment
Это также не решило проблему. Я создал задачу здесь github.com/keyz/identity-obj-proxy/ вопросы/9 - person Abhishek Raj; 20.02.2019
comment
Для SPFx это не работало до SPFx 1.8.0. В SPFx 1.8.0 они представили более новые версии машинописного текста, в которых поддерживается "esModuleInterop": true, что делает это решение излишним. Все еще без esModuleInterop: правда, это должен быть правильный ответ. - person Abhishek Raj; 29.05.2019
comment
Что такое импорт {dep1,dep2} откуда угодно - person Dingus45191; 16.05.2021

arrow_upward
2
arrow_downward

Как подозревает @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

person flocbit    schedule 07.03.2019

arrow_upward
2
arrow_downward

Я использую Jest 24 и столкнулся с похожей проблемой (если не с той же проблемой в другой одежде).

Когда я включаю файлы SASS или CSS в свой JS с помощью импорта ES6, я столкнулся с проблемами, к счастью, было простое решение.

Как рекомендует документация Jest, добавьте следующее преобразование в ваш package.json.

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

В дополнение к инструкциям на сайте Jest создайте файл styleMock.js, но вместо того, чтобы возвращать только объект или строку, включите функцию «процесс», которая возвращает строку для решения проблемы, что-то вроде этого.

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

Это успокоит Jest, если ваша цель состоит в том, чтобы просто продолжать писать тесты (или исправлять, если вам случится мигрировать со старого фреймворка, как это сделал я). Импорт css ES6 больше не будет проблемой.

Надеюсь, это немного более актуальная версия предыдущих решений, которые «почти сработали» для меня!

person ProgrammerInProgress    schedule 20.12.2019