Ошибка в компоненте.tsx React при отладке тестов с использованием ts-jest

Question

Я пытаюсь отладить свои тесты машинописи в приложении React, используя ts-jest,

Мой проект был создан с create-react-app, Я могу выполнить свои тесты машинописи отлично с предоставленной "test": "react-scripts-ts test --env=jsdom"

Но для их отладки я пытаюсь добавить запись скрипта в package.json следующим образом: "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --config=jest.config.debug.json"

Когда я запускаю это как: npm run test:debug Я получаю ожидаемое сообщение: Debugger listening on ws://127.0.0.1:9229/bc733a7d-01d8-42eb-a18d-e59fe30a6393 Но когда я подключаюсь к Chrome DevTools, я нажимаю кнопку "Выполнить", а затем многие из моих тестов запускаются и проходят, но я получаю эту ошибку при запуске, пожалуй, единственного теста, который я сделал в файле.test.tsx.

 PASS  src/chrome/ChromeBrowserController.test.ts
 PASS  src/utils/session-string-parser.test.ts
 PASS  src/model/mutators/WindowAndTabMutator.test.ts
 PASS  src/utils/initialise-fake-chrome-api.test.ts
 PASS  src/factory/BananaFactory.test.ts
 PASS  src/model/DefaultSessionProvider.test.ts
 PASS  src/serialisation/MarkdownSerialisation.test.ts
 PASS  src/serialisation/JSONSerialisation.test.ts
 FAIL  src/BananaTabs.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/julian/work/personal/bananatabs/src/view/icons/share.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="iso-8859-1"?>
                                                                                             ^

    SyntaxError: Unexpected token <

      14 |      rename: boolean;
      15 |      delete: boolean;
    > 16 |  };
         |            ^
      17 |  onRenameAction?(): void;
      18 |  onDeleteAction?(): void;
      19 |  onCopyAction?(): void;

      at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/view/TabToolsView.tsx:16:12)

Test Suites: 1 failed, 1 skipped, 10 passed, 11 of 12 total
Tests:       23 skipped, 64 passed, 87 total
Snapshots:   0 total
Time:        4.848s, estimated 7s
Ran all test suites.

Ошибка указывает на другой файл.tsx, который является компонентом React, а не тестом.

Это содержание моего jest.config.debug.json

{
  "preset": "ts-jest",
  "transformIgnorePatterns": ["node_modules/"]
}

Что я делаю неправильно? Есть идеи?

Answer 1

В вашей конфигурации Jest вам нужно заглушить некоторые файлы, которые Jest не понимает.

https://jestjs.io/docs/en/webpack

moduleNameMapper: { '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/jest/mock/fileMock.js', '\\.(css|less)$': 'identity-obj-proxy', }

fileMock.js:

module.exports = 'test-file-stub';