如何修改Vue3 Quasar徽章组件的Jest循环测试代码？

我在Vue Quasar组件中使用<q-badge>徽章：

<q-badge
    :color="green"
    text-color="white"
    :label="`${value.toFixed(2)}%`"
/>

对应的脚本代码：

<script setup>
    const props = defineProps({
        value: Number
    })
</script>

我想用Jest测试3个不同值下徽章的label文本，测试代码如下：

let wrapper
const values_for_badge = [10, 50, 90]
const componentBadge = (props) =>{
    wrapper = mount(Badge, {
        props:{
            ...props
        }
    });
};

describe('Badge with injected values', () =>{
    values_for_badge.forEach(value => {
        beforeEach(() => {
            componentBadge({value:value})
        });
        
        it(`The right text label for value ${value}`, () => {
            expect(wrapper.text()).toBe(`${value.toFixed(2)}%`)
        })
    })
})

运行测试后，只有最后一个测试通过，其余两个失败。预期显示对应值的两位小数百分比（如10.00%、50.00%），但实际始终显示90.00%，不过测试描述里的循环值是正确的。组件实际运行正常，label显示正确，请问该如何修改测试代码？

问题出在全局变量wrapper结合闭包特性：循环中的beforeEach和it函数会捕获同一个外部wrapper变量，而Jest的测试钩子是异步执行的，当所有beforeEach触发时，循环已经遍历到最后一个值90，导致所有测试都指向最后一次挂载的组件实例。

以下是两种可行的修复方案：

方案1：将wrapper作用域缩小到单个测试块 #

直接在每个it内部创建组件实例，避免变量共享：

const values_for_badge = [10, 50, 90]
const componentBadge = (props) => mount(Badge, { props: { ...props } });

describe('Badge with injected values', () =>{
    values_for_badge.forEach(value => {
        it(`The right text label for value ${value}`, () => {
            const wrapper = componentBadge({value})
            expect(wrapper.text()).toBe(`${value.toFixed(2)}%`)
        })
    })
})

方案2：将wrapper声明在describe内部 #

保留beforeEach结构的同时，把wrapper放到describe作用域内，确保每次测试前都会重新赋值新的实例：

const values_for_badge = [10, 50, 90]
const componentBadge = (props) => mount(Badge, { props: { ...props } });

describe('Badge with injected values', () =>{
    let wrapper // 作用域限定在describe内部
    values_for_badge.forEach(value => {
        beforeEach(() => {
            wrapper = componentBadge({value})
        });
        
        it(`The right text label for value ${value}`, () => {
            expect(wrapper.text()).toBe(`${value.toFixed(2)}%`)
        })
    })
})

核心逻辑是让每个测试块拥有独立的组件实例引用，避免闭包导致的变量覆盖问题。

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