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

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

工具

我用 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 文件完全没反应……

我来解答赞 7 收藏

反馈

2 条解答

亚龙 Lv1

啊这个情况我遇到过！快照测试不更新 Vue 组件结构有几个常见原因，我来帮你排查下：

1. 首先确保你真的运行了更新命令而不是单纯的测试命令。用 jest -u 或者 yarn test -u 来强制更新快照，而不是只跑 test:watch

2. 检查你的测试文件是不是正确引用了组件。有时候 import 路径错了会导致测试的还是旧组件，比如：

import MyButton from './MyButton.vue' // 确保路径正确

3. 看看你的 Storybook 配置里是不是有缓存问题。可以试试删除 node_modules/.cache 目录再重新跑测试

4. 如果你的测试用例里 mock 了组件，可能会导致真实模板没被测试到。检查测试代码里有没有类似这样的东西：

jest.mock('./MyButton.vue') // 如果有这行就删掉

5. 还有个可能就是你改了组件文件名但没更新 import 语句，导致实际上测试的是另一个组件

我上次遇到类似问题就是因为第1条，忘记加 -u 参数了。你先试试这几个方向，应该能解决！如果还不行可以发下你的测试文件代码我再看下~

2026-03-10 11:16

公孙红梅 Lv1

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

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

import initStoryshots from '@storybook/addon-storyshots'

initStoryshots()

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

2026-03-08 10:34