使用Angular为Storybook实施StoryShots

时间:2019-12-06 13:16:57

标签: angular storybook visual-testing storyshots

我正在故事书中运行Angular v8应用程序。我想为其集成自动视觉测试,并找到StoryShots。我找到了this指令并像这样实现。由于Karma是应用程序中的测试工具,因此我调整了笑话配置,仅对具有“ 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();

1 个答案:

答案 0 :(得分:0)

好,我知道了。问题是storyshot.test.ts文件不在src文件夹中,所以我不得不像这样

调整jest.config.js中的路径
  rootDir: '../',
  modulePaths: [
    '<rootDir>'
  ],