Блог

Главная - Вопросы по программированию - Как настроить трафарет Typescript с помощью Jest для поддержки импорта динамических модулей ES6

Как настроить трафарет Typescript с помощью Jest для поддержки импорта динамических модулей ES6

#typescript #d3.js #stenciljs #jest-puppeteer #ecmascript-2020

Вопрос:

Здесь много похожих вопросов (…), но ни один из них не помогает мне получить чистую конфигурацию трафарета. Администрирование конфигурации должно быть оставлено на усмотрение как можно большего количества IMO (…)

Мой компонент трафарета работает нормально, я перепробовал практически все, но Jest spec-тест, который нужно импортировать d3-geo , продолжает бросать меня:

 SyntaxError: Unexpected token 'export'

/app/node_modules/d3-geo/src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export {default as geoArea} from "./area.js";
                                                                                             ^^^^^^

Чего мне не хватает?

Я, вероятно, мог бы использовать Вавилон, чтобы заставить это работать, но это кажется банальным. И я не могу себе представить, что нам действительно нужна предварительная стирка Babel, чтобы получить поддержку модуля ES6.

Особенности приложения:

  • Node@14.16.0 (из docker-image buildkite/кукловод)
  • Stencil@2.6.0
  • Jest@26.6.3
  • Typescript@4.4.2
  • Модуль, который вызывает ошибку: d3-geo@3.0.1

У меня есть конфигурация jest в package.json:

 ...
  "type": "module",
  "jest": {
    "testEnvironment": "jest-environment-node",
    "transform": {}
  },
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/index.cjs.js",
  "es2020": "dist/index.js",
...
  "scripts": {
    ...
    "test": "stencil test --spec --e2e",
    ...
...

И tsconfig содержит:

 ...
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2020",
...

Комментарии:

1. D3 только что преобразован в модули ES6 месяц назад . Ваши варианты: укажите на более старую версию D3. Или прочитайте Чистый пакет ESM Синдре Сорхуса (на который ссылается создатель D3) и, возможно, также подготовьтесь к ESM

2. Спасибо @Iniogo за информацию. Я знаю, что синтаксис ES6 свеж в d3. Это действительно интересно. Но мой вопрос на самом деле больше касается настройки трафарета с помощью набора тестов Jest, который может использовать динамический импорт ES6 (или, по крайней мере, я думаю, что это моя проблема …)

3. До сих пор я потерял целую неделю на эту проблему — НИЧТО из того, что я пытаюсь, не работает, и я не могу пройти мимо этого — и мне ЭТО НУЖНО. Если вы нашли решение, пожалуйста, разместите его здесь. Спасибо!!

Ответ №1:

Вы пытались добавить "esModuleInterop": true в свой файл tsconfig.json? (ссылка на ссылку TSConfig)

Метки: