Storybook 快照测试为啥不更新 Vue 组件的 DOM 结构？

极客明璨提问于 2026-03-08 10:30:23 阅读 3

工具

我用 Storybook 写了个按钮组件的快照测试，但改了模板结构后快照没变，是不是哪里配错了？

我已经在 story 里用了 render 函数，也跑过 test:watch，但生成的 snapshot 还是旧的。下面是我的组件代码：

<template>
  <button class="btn-primary">
    {{ label }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: String
  }
}
</script>

之前快照里是 span，现在改成 button 了，但 Jest 的 snapshot 文件完全没反应……

我来解答赞 4 收藏

反馈

1 条解答

公孙红梅 Lv1

试试加个 -u 参数重新跑测试：jest -u。快照没更新可能是因为你之前跑测试的时候没加更新参数。

如果还不行，检查下是不是装了 @storybook/addon-storyshots，storybook.test.js 里应该有类似这样的配置：

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots()

熬夜写测试最烦这种小问题了...应该能用

2026-03-08 10:34