Vue 单元测试：使用 @vue/test-utils 测试 TabsBar 组件的 barStyle 计算属性

下面是使用 @vue/test-utils 编写的单元测试代码：

import { shallowMount } from '@vue/test-utils';
import TabsBar from '@/components/TabsBar.vue';

describe('TabsBar', () => {
  it('renders the correct bar style', () => {
    const wrapper = shallowMount(TabsBar, {
      propsData: {
        tabs: ['tab1', 'tab2', 'tab3'],
        currentTab: 'tab2'
      },
      stubs: ['transition']
    });

    const bar = wrapper.find('.bar-1');
    expect(bar.element.style.transform).toBe('translateX(0px)');

    wrapper.vm.$parent.$refs.tabs = [
      { getAttribute: () => 'tab1', offsetWidth: 100, offsetLeft: 20 },
      { getAttribute: () => 'tab2', offsetWidth: 120, offsetLeft: 0 },
      { getAttribute: () => 'tab3', offsetWidth: 80, offsetLeft: 40 }
    ];
    wrapper.vm.$forceUpdate();

    expect(bar.element.style.transform).toBe('translateX(20px)');
  });
});

这个测试用例测试了TabsBar组件的barStyle计算属性是否正确计算出样式。在测试中，我们首先使用shallowMount函数创建了TabsBar组件的包装器。然后，我们找到.bar-1元素，并断言其transform样式属性的初始值为translateX(0px)。

接下来，我们手动设置$parent.$refs.tabs属性，模拟父组件中的tabs元素数组。然后，我们调用$forceUpdate方法强制组件重新渲染。最后，我们断言.bar-1元素的transform样式属性是否正确更新为translateX(20px)。

注意：在测试中，我们使用了stubs选项来忽略transition组件，因为我们只关心TabsBar组件的样式计算，而不需要关心过渡效果。