Аддон Storybook StoryShots для Angular 12

Question

Я установлю Snapshot Testing с Storybook под Angular 12. Я устанавливаю jest $ yarn add --dev jest jest-preset-angular @types/jest и сделайте Настройки

      "jest": {
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
}

и установите данные setupJest.ts только с одной строкой import 'jest-preset-angular/setup-jest';.

Это установка шутки. Это работает для меня.

Проблема в аддоне Storyshorts от Storybook. Устанавливаю Storyshorts yarn add @storybook/addon-storyshots --dev и создать файл src/storyshorts.test.js с этим кодом:

      import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

Когда я запускаю команду jest в моем проекте Angular я стал этой ошибкой:

      Cannot find module 'jest-preset-angular/build/setup-jest' from 'node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js'
  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
  at setupAngularJestPreset (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js:36:14)
  at Object.load (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/angular/loader.js:43:5)
  at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/frameworks/frameworkLoader.js:26:19)
  at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/ts3.9/api/index.js:42:39)

В моем Package.json есть следующие записи:

      ...
"@storybook/addon-storyshots": "^6.3.12",
"@types/jest": "^27.0.2",
"jest": "^27.3.1",
"jest-preset-angular": "^10.0.1",

и Angular 12 пакетов.

Answer 1

Добро пожаловать в ад:D!

Для вашей проблемы: аддоны storyshots пытаются загрузить файл с неправильного пути. С jest-preset-angular версия 9, setup-jest.ts больше не находится в jest-preset-angular/build/ папка (и это не единственный затронутый файл).

Чтобы исправить это, вы можете использовать moduleNameMapper из конфигурации шутки, чтобы переписать путь.

Смотри мой jest.config.js например:

Если вам нужно больше объяснений, спросите меня :)