Instalaré Snapshot Testing con Storybook en Angular 12. $ yarn add --dev jest jest-preset-angular @types/jest y hago la configuración
"jest": { "preset": "jest-preset-angular", "setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"] } y configure los datos setupJest.ts con una sola línea import 'jest-preset-angular/setup-jest'; .
Esa es la configuración de Jest. Esto funciona para mí.
El problema es el complemento Storyshorts de Storybook. Instalo Storyshorts yarn add @storybook/addon-storyshots --dev y creo el archivo src/storyshorts.test.js con este código:
import initStoryshots from '@storybook/addon-storyshots'; initStoryshots(); Cuando ejecuto el comando jest en mi Angular Project me aparece este error:
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)Mi Package.json tiene estas entradas:
... "@storybook/addon-storyshots": "^6.3.12", "@types/jest": "^27.0.2", "jest": "^27.3.1", "jest-preset-angular": "^10.0.1",y Angular 12 paquetes.
EDITAR: Después de actualizar a Angular 13:
/** @type {import('@jest/types').Config.InitialOptions} */ module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'], globals: { "ts-jest": { tsconfig: '<rootDir>/tsconfig.storyshots.json', } }, transformIgnorePatterns: [], moduleNameMapper: { 'jest-preset-angular/build/setup-jest': 'jest-preset-angular/setup-jest', 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer': 'jest-preset-angular/build/serializers/no-ng-attributes', 'jest-preset-angular/build/AngularSnapshotSerializer': 'jest-preset-angular/build/serializers/ng-snapshot', 'jest-preset-angular/build/HTMLCommentSerializer': 'jest-preset-angular/build/serializers/html-comment', } };=== Original (Angular 12) ===
¡Bienvenido al infierno :D!
Para su problema: el complemento storyshots intenta cargar el archivo setup-jest.ts desde una ruta incorrecta. Desde la versión 9 jest-preset-angular , setup-jest.ts ya no se encuentra en la carpeta jest-preset-angular/build/ (y este no es el único archivo afectado). El complemento Storyshots aún no maneja este cambio, por lo que puede usar moduleNameMapper desde jest config para reescribir la ruta y solucionar su problema.
Ver mi jest.config.js como ejemplo:
require('jest-preset-angular/ngcc-jest-processor'); module.exports = { preset: 'jest-preset-angular', setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'], transformIgnorePatterns: [ '<rootDir>/node_modules/(?!(@storybook/addon-docs))', ], moduleNameMapper: { 'jest-preset-angular/build/setup-jest': 'jest-preset-angular/setup-jest', 'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer': 'jest-preset-angular/build/serializers/no-ng-attributes', 'jest-preset-angular/build/AngularSnapshotSerializer': 'jest-preset-angular/build/serializers/ng-snapshot', 'jest-preset-angular/build/HTMLCommentSerializer': 'jest-preset-angular/build/serializers/html-comment', }, };Si necesitas más explicaciones, pregúntame :)