Search code examples
angularstorybooknrwl-nxtest-runner

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

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",
Solution

  • 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
    },
    1. call test-runner with --stories-json flag