Nx工作区下如何用Storybook测试Angular Material模板变量

你使用的模板代码如下：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

上述代码在常规Angular页面可正常运行，但在Storybook中测试时菜单无法显示，已在Storybook配置中导入Material module仍无效果，当前开发环境为Nx workspace，用于测试自研组件库。

按以下步骤排查配置即可，这类问题基本都是核心依赖漏配导致的：

• 不要使用笼统聚合的Material module导入，Angular Material的能力是按模块拆分的，菜单功能必须单独导入MatMenuModule、MatButtonModule，最容易遗漏的是BrowserAnimationsModule：mat-menu的弹出动画、触发逻辑完全依赖Angular动画模块，缺这个模块时点击按钮不会触发菜单弹出，也不会抛出醒目的报错。
• 注意Nx环境下的模块作用域规则：Nx生成的组件库Storybook配置默认是模块隔离的，就算你在全局Storybook配置里导入了相关模块，也需要在对应story的moduleMetadata的imports数组里显式声明依赖，或者直接把依赖加到你自研组件库的NgModule的imports、exports数组里，避免构建树摇时把相关指令剔除。
  正确的基础story配置示例：

  // 对应组件的.stories.ts文件
  import { MatButtonModule } from '@angular/material/button';
  import { MatMenuModule } from '@angular/material/menu';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  export const MenuTest = {
    render: () => ({
      template: `
        <button mat-button [matMenuTriggerFor]="menu">Menu</button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item>Item 1</button>
          <button mat-menu-item>Item 2</button>
        </mat-menu>
      `,
      moduleMetadata: {
        imports: [MatButtonModule, MatMenuModule, BrowserAnimationsModule]
      }
    })
  };
  

• 补全Angular Material主题样式配置：mat-menu依赖CDK浮层渲染，没有加载主题样式时，菜单DOM其实已经生成，但会因为缺少定位、z-index样式被藏在页面外或者透明不可见。需要在Storybook的全局配置（preview.js/preview.ts）或者Nx项目的storybook构建配置的styles数组里，引入Material核心主题样式：

  // 引入预构建主题，使用自定义主题就换成你自己的主题文件入口
  import '@angular/material/prebuilt-themes/indigo-pink.css';
  

• 补全CDK依赖：如果控制台报浮层相关的注入错误，手动导入@angular/cdk/overlay下的OverlayModule加到imports数组里，部分低版本Angular Material不会自动携带这个依赖。

1. 先在Storybook里跑上面写的最小化原生mat-menu示例，不要先加载你自研的封装组件，确认原生菜单能正常弹出，先把环境配置问题排除
2. 原生示例跑通后，再逐步替换成你自己封装的组件，逐个添加依赖，定位漏配的模块
3. 后续做自动化交互测试时，可以直接用Storybook的play函数模拟按钮点击，断言菜单项是否正常渲染即可，不需要额外引入第三方测试工具。

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