Jest測試Vue組件的插槽分發

在使用Jest進行Vue組件測試時，你可能需要測試組件的插槽分發（slot distribution）是否按預期工作。Vue 3中，插槽的概念已經被簡化，不再需要使用<template>標簽來包裹插槽內容。以下是如何使用Jest和Vue Test Utils來測試Vue組件的插槽分發。

首先，安裝必要的依賴：

npm install --save-dev jest @vue/test-utils vue-jest babel-jest @babel/core @babel/preset-env

然后，配置Babel以轉換Vue文件。在項目根目錄下創建一個名為babel.config.js的文件，并添加以下內容：

module.exports = {
  presets: [
    '@babel/preset-env'
  ]
};

接下來，創建一個Vue組件，例如MyComponent.vue，它有一個默認插槽和一個命名插槽：

  <div>
    <h1>Default Slot</h1>
    <slot></slot>
    <h2>Named Slot</h2>
    <slot name="footer"></slot>
  </div>
</template><script>
export default {
  name: 'MyComponent'
};
</script>

現在，我們將編寫一個測試文件來測試這個組件的插槽分發。在tests目錄下創建一個名為MyComponent.spec.js的文件，并添加以下內容：

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

describe('MyComponent', () => {
  it('renders default slot content', () => {
    const wrapper = mount(MyComponent, {
      slots: {
        default: '<p>This is the default slot content</p>'
      }
    });
    expect(wrapper.text()).toContain('This is the default slot content');
  });

  it('renders named slot content', () => {
    const wrapper = mount(MyComponent, {
      slots: {
        footer: '<p>This is the footer slot content</p>'
      }
    });
    expect(wrapper.text()).toContain('This is the footer slot content');
  });
});

在這個測試文件中，我們使用mount函數來掛載組件，并通過slots選項提供插槽內容。我們使用expect來斷言渲染的組件包含了我們提供的插槽內容。

最后，確保你的jest.config.js配置文件正確設置了transform和testEnvironment：

module.exports = {
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.jsx?$': 'babel-jest'
  },
  testEnvironment: 'jsdom'
};

現在，你可以運行npm test或yarn test來執行測試。這將會測試你的組件是否正確地分發了插槽內容。