我正在尝试使用Angular中的Storybook附加Storyshot。我已为我的应用配置了Storybook / Angular和Jest-Preset-Angular。但是当我进行笑话测试时,我得到了错误
我已经研究了故事书模块中的Badge组件,它确实需要故事书/反应。我不太确定为什么我的故事书/角度会使用需要故事书/反应的模块,但我不知道该怎么做。有什么建议吗?
这是我的配置:
package.json:
{
"name": "untitled1",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"jest": "jest",
"jest:watch": "jest --watch"
},
"private": true,
"dependencies": {
"@angular-builders/jest": "^8.2.0",
"@angular/animations": "~8.2.13",
"@angular/common": "~8.2.13",
"@angular/compiler": "~8.2.13",
"@angular/core": "~8.2.13",
"@angular/forms": "~8.2.13",
"@angular/platform-browser": "~8.2.13",
"@angular/platform-browser-dynamic": "~8.2.13",
"@angular/router": "~8.2.13",
"canvas": "^2.6.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.17",
"@angular/cli": "~8.3.17",
"@angular/compiler-cli": "~8.2.13",
"@angular/language-service": "~8.2.13",
"@babel/core": "^7.7.0",
"@storybook/addon-actions": "^5.2.5",
"@storybook/addon-links": "^5.2.5",
"@storybook/addon-notes": "^5.2.5",
"@storybook/addon-storyshots": "^5.2.5",
"@storybook/addons": "^5.2.5",
"@storybook/angular": "^5.2.5",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/jest": "^24.0.22",
"@types/node": "~8.9.4",
"autoprefixer": "^8.6.5",
"babel-loader": "^8.0.6",
"babel-plugin-require-context-hook": "^1.0.0",
"codelyzer": "^5.0.0",
"css-loader": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^24.9.0",
"jest-preset-angular": "^8.0.0",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"less-loader": "^5.0.0",
"protractor": "~5.4.0",
"style-loader": "^1.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
jest.config.js:
module.exports = {
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.html$',
astTransformers: [
'jest-preset-angular/build/InlineFilesTransformer',
'jest-preset-angular/build/StripStylesTransformer'
],
},
},
moduleFileExtensions: [
"js",
"json",
"jsx",
"ts",
"tsx",
"node"
],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/src/app/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^environments/(.*)$': '<rootDir>/src/environments/$1',
},
preset: "jest-preset-angular",
setupFiles : ["<rootDir>/.jest/register-context.js"],
setupFilesAfterEnv: ["<rootDir>/.jest/setupJest.ts"],
snapshotSerializers: [
"jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js",
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
testPathIgnorePatterns: [
"/node_modules/",
"<rootDir>/src/test.ts"
],
transform: {
"^.+\\.jsx?$": "babel-jest",
'^.+\\.(ts|js|html)$': 'ts-jest',
},
transformIgnorePatterns: [
'node_modules/(?!(@ngrx|@storybook/angular))'
]
};
.babelrc:
{
"presets": [],
"plugins": [],
"env": {
"test": {
"plugins": [
"require-context-hook",
"@babel/plugin-transform-modules-commonjs"
]
}
}
}
storybook.test:
import * as path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
initStoryshots({
framework: 'angular',
configPath: path.join(__dirname, '../.storybook'),
test: multiSnapshotWithOptions(),
});
Here是指向github存储库的链接,用于重现此错误。 其他文件可应要求提供。我真的很感谢您的帮助。