故事书附加组件当我拥有故事书/角度构建时,Storyshot会寻找故事书/反应

时间:2019-11-07 13:56:26

标签: angular jestjs storybook storyshots angular-storybook

我正在尝试使用Angular中的Storybook附加Storyshot。我已为我的应用配置了Storybook / Angular和Jest-Preset-Angular。但是当我进行笑话测试时,我得到了错误 enter image description here

我已经研究了故事书模块中的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存储库的链接,用于重现此错误。 其他文件可应要求提供。我真的很感谢您的帮助。

0 个答案:

没有答案