Storyyshot дополнение Storyshot ищет сборник рассказов / реагирует, когда у меня есть сборник рассказов / угловая сборка - PullRequest
0 голосов
/ 07 ноября 2019

Я пытаюсь использовать сторишот дополнения к сборнику рассказов в Angular. Я настроил свое приложение с помощью storybook / angular и jest-preset-angular. Но когда я запускаю свой шутливый тест, я получаю сообщение об ошибке enter image description here

Я посмотрел на компонент Badge в модуле сборника рассказов, и он действительно требует сборника рассказов / реакции. Я не совсем уверен, почему мой сборник рассказов / angular будет использовать модуль, требующий сборника рассказов / реакции, и я не знаю, что с этим делать. Любые предложения?

Вот мои конфигурации:

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(),
});

Здесь - ссылка на репозиторий github для воспроизведения этой ошибки. Другие документы предоставляются по запросу. Буду очень признателен за любую помощь.

...