使用 Angular 为故事书实施 StoryShots

Question

我是运行一个 Angular v8 应用程序并且在故事书中。我想为它集成自动化视觉测试并找到了 StoryShots。我找到了 this 指令并像那样实现了它。因为 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>'
  ],

使用 Angular 为故事书实施 StoryShots

Implement StoryShots for storybook with Angular

angular

storybook

visual-testing

storyshots