使用 Angular 為故事書實現 StoryShots

Question

我正在運行 Angular v8 應用程序並在故事書中。 我想為它集成自動化視覺測試並找到了 StoryShots。 我找到了這個指令並像這樣實現了它。 因為 Karma 是應用程序中的測試工具，所以我調整了 jest 配置，只對帶有“test.ts”的文件進行可視化測試。 Jest 找到了 spec.ts 文件，但只有 test.ts 文件，它找不到測試No tests found, exiting with code 1 。 我錯過了什么？ 有人對 angular 和 StoryShots 有一些經驗嗎？

這是我的代碼：

package.json

  "scripts": {
   ...
    "jest": "jest"
  },
  "dependencies": {
    ...
    "@angular/core": "^8.2.13"
  },
  "devDependencies": {
    ...
    "@storybook/addon-storyshots": "^5.2.8",
    "@storybook/angular": "^5.2.8",
    "@types/jest": "^24.0.23",
    "jest-preset-angular": "^8.0.0",
    "jest": "^24.9.0",
  },
  "engines": {
    "node": ">=10.15.0",
    "npm": "~6.4.0"
  }

jest.config.js

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['src'],
  setupFilesAfterEnv: [
    './jest.setup.ts'
  ],
  testMatch: [
    '**/__tests__/**/*.test.+(ts)?(x)' // <- only test.ts files
  ],
  globals: {
    __TRANSFORM_HTML__: true
  },
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    "^.+\\.(ts|js|html)$": "ts-jest"
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html']
};

jest.setup.js

import 'jest-preset-angular';

在根文件夾中，我有一個帶有測試文件的.storybook文件夾

storyshots.test.ts

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

initStoryshots();

Answer 1

好的，我想通了。 問題是storyshot.test.ts文件不在 src 文件夾中，所以我不得不像這樣調整jest.config.js的路徑

  rootDir: '../',
  modulePaths: [
    '<rootDir>'
  ],