如何为Nx Angular库运行Storybook Jest交互测试？

一、依赖前置 #

首先确保已安装Storybook测试运行器：

npm install @storybook/test-runner --save-dev
# 或使用yarn/pnpm
yarn add @storybook/test-runner -D
pnpm add @storybook/test-runner -D

二、脚本添加位置与参数配置 #

针对你的Inventory库，有两种规范的配置方式：

方案1：根目录package.json直接添加脚本

打开项目根目录的package.json，在scripts节点下添加指定Inventory库的测试脚本：

{
  "scripts": {
    "test-storybook:inventory": "test-storybook -c libs/inventory/.storybook"
  }
}

• 参数说明：-c 指定Storybook配置文件所在目录，对应Inventory库的.storybook文件夹路径（默认Nx库放在libs目录下）
• 运行测试：执行npm run test-storybook:inventory即可仅运行Inventory库的Storybook交互测试

方案2：Nx官方目标配置（推荐）

找到libs/inventory/project.json文件，在targets节点下新增test-storybook目标：

{
  "targets": {
    // 其他已存在的目标（如build、storybook等）
    "test-storybook": {
      "executor": "@storybook/angular:test",
      "options": {
        "configDir": "libs/inventory/.storybook",
        "browserHeadless": true,
        "ci": true
      }
    }
  }
}

• 运行测试：直接执行Nx命令nx test-storybook inventory
• 可选：在根package.json添加快捷脚本，方便调用：

{
  "scripts": {
    "test-storybook:inventory": "nx test-storybook inventory"
  }
}

三、注意事项 #

• 如果你的Inventory库路径不是libs/inventory，请对应调整configDir的路径
• 若需运行所有库的Storybook测试，可在根package.json添加通用脚本："test-storybook": "test-storybook"，执行后会自动扫描所有.storybook配置

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