如何使用Loki仅对单个Story执行视觉回归测试/快照测试及调整配置文件路径

一、仅对单个Story执行Loki测试 #

首先要指出你配置里的一个关键问题：你在storyFilter函数中写了多个return语句，这会导致函数在执行第一个return后就立即终止，后面的过滤逻辑根本不会被执行！这是你之前尝试多种过滤规则却无效的核心原因。

下面是几种经过验证的可行方案：

方案1：通过配置文件全局过滤 #

修改你的loki.config.js，只保留正确的过滤逻辑，同时确保captureAllStories设为false：

module.exports = {
  captureAllStories: false,
  storybookUrl: 'http://localhost:6006',
  // 全局过滤规则，对所有配置生效
  storyFilter: (story) => {
    // 直接匹配目标story的id，这是最精准的方式
    return story.id === 'project-base-mybutton--default';
  },
  configurations: {
    'chrome.desktop': {
      target: 'chrome.app',
      width: 1200,
      height: 800,
    },
  },
  verboseRenderer: true,
  reportOnFailure: true,
};

配置完成后，直接运行npx loki update或npx loki test，就只会对目标story生成/比对快照了。

方案2：命令行参数直接过滤（无需修改配置） #

如果你不想改动配置文件，直接在命令行通过--storiesFilter参数指定目标story的id、kind或name即可，这是最灵活的方式：

# 精准匹配story id
npx loki update --storiesFilter "project-base-mybutton--default"

# 匹配story的分类（kind）
npx loki update --storiesFilter "Project/Base/MyButton"

# 匹配story的名称（name）
npx loki update --storiesFilter "default"

方案3：自定义story URL（适合特殊场景） #

如果你的story需要携带额外URL参数，可以使用customStories配置，运行时指定对应的key即可：

module.exports = {
  captureAllStories: false,
  storybookUrl: 'http://localhost:6006',
  customStories: {
    'my-button-default': {
      url: 'http://localhost:6006/?path=/story/project-base-mybutton--default'
    }
  },
  configurations: {
    'chrome.desktop': {
      target: 'chrome.app',
      width: 1200,
      height: 800,
    },
  },
};

运行命令时指定这个自定义story的key：

npx loki update --storiesFilter "my-button-default"

二、调整Loki配置文件的存放路径 #

Loki默认读取项目根目录的loki.config.js，如果要将配置文件放在其他目录（比如./config/loki.config.js），可以通过--config参数指定文件路径：

# 指定自定义路径的配置文件
npx loki update --config ./config/loki.config.js

# 同时指定story过滤和自定义配置路径
npx loki update --config ./config/loki.config.js --storiesFilter "project-base-mybutton--default"

为了方便使用，你还可以在package.json的scripts中配置快捷命令：

{
  "scripts": {
    "loki:test:single": "npx loki update --config ./config/loki.config.js --storiesFilter \"project-base-mybutton--default\""
  }
}

之后只需运行npm run loki:test:single即可执行测试。

备注：内容来源于stack exchange，提问作者Jorge Mauricio