NX/Angular项目中Storybook test-runner无法识别交互测试问题

问题概述 #

在NX管理的Angular项目中，Storybook Test Runner无法识别故事文件中的交互测试——即使在.storybook/main.js中指定了故事文件的直接路径，运行test-storybook命令仍提示No tests found。

当前.storybook/main.js配置片段：

module.exports = {
...
  stories: [
    ...rootMain.stories,
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)',
    '../src/lib/button/button.component.stories.mdx' // 直接指定路径
  ],
  ...
};

终端执行npm run storybook-test的错误输出：

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

> storybook-interactions@0.0.0 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

解决方案 #

1. 调整Test Runner的路径匹配规则 #

在libs/ui-kit/.storybook目录下创建test-runner.js配置文件，手动指定适配NX工作区的测试文件路径：

module.exports = {
  testMatch: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
};

或者直接在命令行中指定路径规则：

npx test-storybook --url=http://localhost:4400 --testMatch="../src/**/*.stories.mdx" --testMatch="../src/**/*.stories.ts"

2. 确保故事文件包含可执行的交互测试 #

Test Runner只会识别包含play函数的故事，检查button.component.stories.mdx是否定义了交互测试逻辑：

import { Meta, Story, Play } from '@storybook/angular';
import { ButtonComponent } from './button.component';
import { within, userEvent } from '@storybook/testing-library';

<Meta title="Button" component={ButtonComponent} />

<Story name="Primary">
  {() => ({
    component: ButtonComponent,
    props: {
      label: 'Click me',
    },
  })}
  <Play>
    async ({ canvasElement }) => {
      const canvas = within(canvasElement);
      const button = canvas.getByText('Click me');
      await userEvent.click(button);
      // 可添加断言逻辑
    }
  </Play>
</Story>

若没有play函数，Test Runner会判定该故事无测试可执行。

3. 修正命令执行的配置路径 #

修改package.json中的storybook-test命令，通过--config-dir明确指定Storybook配置目录，避免NX工作区的路径解析问题：

{
  "scripts": {
    "storybook-test": "npx test-storybook --url=http://localhost:4400 --config-dir=libs/ui-kit/.storybook"
  }
}

4. 升级Test Runner依赖版本 #

当前使用的@storybook/test-runner@0.9.1版本较旧，存在NX工作区兼容性问题，升级到最新兼容版本：

npm install @storybook/test-runner@latest --save-dev

同时确保@nrwl/storybook与其他Storybook依赖版本同步（NX 15.x对应Storybook 6.5.x版本兼容）。

验证步骤 #

1. 重启Storybook服务：nx run ui-kit:storybook
2. 重新执行测试命令：npm run storybook-test

内容的提问来源于stack exchange，提问作者Dzmitry Vasilevsky