Storybook test-runner can't find interaction tests in NX/Angular app

Question

Test runner can't find a single test to execute in nx workspace based Angular project. I have even tried to select a story by a direct path to it without wildcards but it still can't find any.

main.js

module.exports = {
...
  stories: [
    ...rootMain.stories,
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
    '../src/lib/button/button.component.stories.mdx' // direct path
  ],
  ...
};

Steps to reproduce the behaviour

1. Clone repo and npm i --legacy-peer-deps
2. nx run ui-kit:storybook
3. npm run storybook-test
4. Stories aren't found by test-runner while having correct paths

ip-192-168-1-212:storybook-interactions dzmvasilevsky$ npm run storybook-test

> [email protected] storybook-test
> cd libs/ui-kit && npx test-storybook --url=http://localhost:4400

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /Users/dzmvasilevsky/Work/Lab/storybook-interactions/storybook-interactions/libs/ui-kit
  15 files checked.
  testMatch: /Users/dzmvasilevsky/Work/Lab/storybook-interactions/storybook-interactions/libs/ui-kit/**/*.stories.mdx, /Users/dzmvasilevsky/Work/Lab/storybook-interactions/storybook-interactions/libs/ui-kit/**/*.stories.@(js|jsx|ts|tsx) - 0 matches
  testPathIgnorePatterns: /node_modules/ - 15 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches

Expected behaviour

button.component.stories.mdx is found, processed and interaction tests run.

Environment
Node : 16.15.0
OS : darwin x64
npm : 8.10.0
"@nrwl/storybook": "15.0.13",
"@storybook/addon-a11y": "^6.5.13",
"@storybook/addon-essentials": "^6.5.13",
"@storybook/addon-interactions": "^6.5.13",
"@storybook/addon-jest": "^6.5.13",
"@storybook/addons": "^6.5.13",
"@storybook/angular": "^6.5.13",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/core-server": "^6.5.13",
"@storybook/jest": "^0.0.10",
"@storybook/manager-webpack5": "^6.5.13",
"@storybook/test-runner": "^0.9.1",
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "^6.5.13",

Answer 1

I have found the reason. Not sure why it is not documented in https://storybook.js.org/docs/angular/writing-tests/test-runner but found it somewhere else that default storybook build mode doesn't make test-runner to work with mdx. To make it work we need to

1. Add to the ./storybook/main.js

    features: {
        buildStoriesJson: true
    },

2. call test-runner with --stories-json flag

Answer 2

I recommend using nx console.

This generates the following command line generators (put on one line to run):

To setup a library for storybook (may have to delete any wrong configs)

npx nx generate @nrwl/storybook:configuration ui-kit 
--uiFramework=@storybook/angular 
--configureTestRunner

main.ts

import { rootMain } from '../../../../../.storybook/main';
import type { StorybookConfig, Options } from '@storybook/core-common';

const config: StorybookConfig = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...(rootMain.addons || [])],
  webpackFinal: async (config, { configType }: Options) => {
    // apply any global webpack configs that might have been specified in .storybook/main.ts
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType } as Options);
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

module.exports = config;

This also adds to project.json.

To generate stories for components (# optional)

npx nx generate @nrwl/angular:stories
# --generateCypressSpecs
# --cypressProject=test-e2e