Implement StoryShots for storybook with Angular

Question

I'm running an Angular v8 app and within storybook. I want to integrate automated visual testing for it and found StoryShots. I found this instruction and implemented it like that. Because Karma the testing tool in the app, I adjust the jest config that only files with "test.ts" should be visually tested. Jest found the spec.ts files but only with test.ts file, it can't found the test No tests found, exiting with code 1. What did I missed? Anyone have some experience with angular and StoryShots?

This is my code:

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';

In the root folder I have a .storybook folder with the test file

storyshots.test.ts

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

initStoryshots();

Answer 1

Ok, I figure it out. The problem was that the storyshot.test.ts file wasn't in the src folder so I had to adjust the path in the jest.config.js like this

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