Storybook中如何配置Jest快照测试时忽略特定样式属性？

晏鸣 Dev 提问于 2026-02-12 21:37:29 阅读 72

工具

我在给React组件写Storybook快照测试时遇到问题，快照里总是包含组件上不需要的样式属性，比如data-testid。我尝试在Jest配置里加了snapshotSerializers，但还是报错说快照不匹配，应该怎么排除这些属性呢？

具体场景是这样的：我用Storybook+Jest做快照测试，组件有data-testid="button"这样的测试辅助属性。执行测试时快照里会包含这个属性，但我想只保留组件的核心结构。之前试过修改jest.config.js：


module.exports = {
  snapshotSerializers: ['@testing-library/react-native/serializer'],
  // 其他配置...
};

但运行npm test时仍然得到这样的错误：


- Received value does not match stored snapshot.
  
  - Diff:
    @@ -10,10 +10,9 @@
        "props": {
          "children": "Click me",
          "className": "primary-btn",
    -     "data-testid": "button",
          "onClick": [Function]
        },
    ...

有什么办法能全局配置快照测试忽略特定属性吗？或者需要在Storybook的预处理器里做处理？

我来解答赞 13 收藏

反馈

2 条解答

Tr° 闪闪 Lv1

这个问题其实挺常见的，snapshotSerializers的方向是对的，但需要自定义一个serializer来过滤属性。

在jest.config.js里这样配置：

module.exports = {

  snapshotSerializers: [

    {

      print: (element, serializer) => {

        if (!element || typeof element !== 'object') {

          return serializer.print(element, serializer);

        }

        

        const clone = { ...element };

        if (clone.props && typeof clone.props === 'object') {

          const { 'data-testid': _ignored, ...restProps } = clone.props;

          clone.props = restProps;

        }

        

        return serializer.print(clone, serializer);

      },

      test: (element) => {

        return element && typeof element === 'object' && element.props !== undefined;

      },

    },

  ],

};

这样配置完再跑测试，data-testid就不会出现在快照里了。

如果你想同时排除多个属性，可以这样改：

const propsToRemove = ['data-testid', 'data-cy', 'testId'];



module.exports = {

  snapshotSerializers: [

    {

      print: (element, serializer) => {

        if (!element || typeof element !== 'object') {

          return serializer.print(element, serializer);

        }

        

        const clone = { ...element };

        if (clone.props && typeof clone.props === 'object') {

          const filteredProps = {};

          Object.keys(clone.props).forEach(key => {

            if (!propsToRemove.includes(key)) {

              filteredProps[key] = clone.props[key];

            }

          });

          clone.props = filteredProps;

        }

        

        return serializer.print(clone, serializer);

      },

      test: (element) => {

        return element && typeof element === 'object' && element.props !== undefined;

      },

    },

  ],

};

另外提醒一下，官方文档里说Storybook 7+推荐用test runner配合playwright做交互测试，快照测试这种方案在大型项目里维护成本其实挺高的，能不用尽量少用。

2026-03-19 12:04

远香（打工版） Lv1

你这个需求其实挺常见的，data-testid 这种测试属性确实不该进快照。问题出在你用的 serializer 不对路——@testing-library/react-native/serializer 是给 React Native 用的，你在 Web 环境下用它基本没效果。

标准写法是用 @storybook/testing-react 提供的预处理器机制，在快照序列化前把不需要的属性过滤掉。你可以通过自定义一个 snapshot serializer 来实现全局过滤。

在项目根目录新建一个文件，比如 jest-serializer-remove-test-ids.js：

const reactElement = Symbol.for('react.element');



module.exports = {

  test(val) {

    return val && val.$$typeof === reactElement;

  },

  serialize(element, config, indentation, depth, refs, printer) {

    const filteredProps = { ...element.props };

    delete filteredProps['data-testid'];

    // 如果还有其他想忽略的也可以删，比如 data-cy、aria-label 测试用的等

    // delete filteredProps['data-cy'];



    const filteredElement = {

      ...element,

      props: filteredProps,

    };



    return printer(filteredElement, config, indentation, depth, refs);

  },

};





然后在 jest.config.js 里注册这个 serializer：



module.exports = {

  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],

  snapshotSerializers: ['/jest-serializer-remove-test-ids.js'],

};





注意路径要写对，可以用 path.resolve 引入。



这样所有快照里的 data-testid 都会被自动移除，不会再出现 diff 报错。而且这是全局生效的，不用每个 story 单独处理。



另外提醒一点，别指望 Storybook 的 render 预处理能解决这个问题，因为快照是 Jest 拿到的 VDOM 结构，必须在序列化阶段动手脚才有效。这套方案是目前社区的标准做法，文档也明确推荐过类似模式。


                
                    
                    
                        点赞
                        6
                    
                    
                    
                    2026-02-12 22:03


                    
                        
                            相关推荐
                            
                                
    
        
            2
            回答
        
        
            57
            浏览
        
    
    
        Storybook中用Jest测试组件时为什么显示元素不存在？
        最近在给项目集成Storybook测试，写了个简单的按钮测试用例，但运行时总报错说找不到按钮元素： import { render, screen } from '@testing-libr...
        
            ლ亚美
                            工具                        2026-02-02 19:01:32
        
    

    
        
            1
            回答
        
        
            22
            浏览
        
    
    
        Storybook 快照测试为啥没捕捉到 CSS 样式变化？
        我在用 Storybook 做组件快照测试，但发现即使改了组件的样式，快照也没更新。比如我调整了一个按钮的 padding 和背景色，Jest 的 snapshot 测试居然通过了，根本没报错。是不是...
        
            程序员东旭
                            工具                        2026-03-24 22:51:18
        
    

    
        
            2
            回答
        
        
            32
            浏览
        
    
    
        Storybook 快照测试为啥不更新 Vue 组件的 DOM 结构？
        我用 Storybook 写了个按钮组件的快照测试，但改了模板结构后快照没变，是不是哪里配错了？ 我已经在 story 里用了 render 函数，也跑过 test:watch，但生成的 snapsh...
        
            极客明璨
                            工具                        2026-03-08 10:30:23
        
    

    
        
            2
            回答
        
        
            58
            浏览
        
    
    
        Storybook快照测试总不通过怎么办？
        我在给按钮组件写Storybook快照测试时遇到了问题。明明组件代码没改，但快照对比总显示不匹配，这是怎么回事啊？ 我按照文档配置了@storybook/addon-jest，测试用例是这样的： im...
        
            Des.综敏
                            工具                        2026-02-12 12:46:30
        
    

    
        
            1
            回答
        
        
            40
            浏览
        
    
    
        Jest 测试中如何正确模拟 React 组件的异步 useEffect？
        我在用 Jest + React Testing Library 测试一个组件，它在 useEffect 里发起了异步请求。测试总是报“无法在未挂载的组件上执行 setState”，我试过用 awai...
        
            令狐倩利
                            框架                        2026-03-05 14:04:22
        
    

    
        
            2
            回答
        
        
            53
            浏览
        
    
    
        Jest 测试中如何模拟 axios 的异步请求？
        我在用 Jest 写单元测试，组件里用了 axios 发请求，但每次测试都真的发出去了，还报错。我想 mock 掉 axios，但不知道怎么正确模拟异步返回。 试过用 jest.mock('axios...
        
            慕容爱香
                            前端                        2026-03-04 23:04:18
        
    

    
        
            2
            回答
        
        
            43
            浏览
        
    
    
        Storybook中如何在多个stories间共享parameters配置？
        最近在用Storybook写组件文档时发现，每个stories文件都要重复写相同的parameters配置，比如布局和主题设置，这样维护起来好麻烦。我尝试把参数抽离到预设文件里，但运行时提示找不到gl...
        
            萌新.景苑
                            工具                        2026-02-05 21:40:34
        
    

    
        
            2
            回答
        
        
            57
            浏览
        
    
    
        Jest 测试移动端 React 组件时如何模拟 useMediaQuery？
        我写了个响应式组件，用 useMediaQuery 判断是不是移动端，但在 Jest 里跑测试一直报错说 matchMedia 未定义。试过 mock window.matchMedia，但还是不生效...
        
            若彤
                            移动                        2026-03-26 04:09:25
        
    

    
        
            2
            回答
        
        
            58
            浏览
        
    
    
        Jest 测试移动端组件时怎么模拟触摸事件？
        我用 Jest + React Testing Library 写测试，但有个组件依赖 onTouchStart 事件，本地跑测试一直不触发。试过 fireEvent.touchStart，但报错说方...
        
            Air-利云
                            移动                        2026-03-18 05:55:18
        
    

    
        
            2
            回答
        
        
            69
            浏览
        
    
    
        Jest测试时mock函数调用次数始终为0怎么办？
        在测试React组件时遇到了奇怪的问题。我用jest.fn()模拟了一个handleClick函数，但测试时expect(mockFn.mock.calls.length).toBe(1)一直报错说实...
        
            UX-云碧
                            框架                        2026-02-12 23:04:28


                
    Copyright © 2026 JZTHEME All rights reserved网站地图桂ICP备2022001918号-9