Jest測試Vue組件的插槽作用域

在使用Jest進行Vue組件測試時，如果你需要測試組件的插槽（slots）以及作用域插槽（scoped slots），你可以使用vue-test-utils庫來掛載組件并檢查插槽內容。以下是一個基本的示例，展示了如何使用Jest和vue-test-utils來測試Vue組件的插槽和作用域插槽。

首先，安裝必要的依賴：

npm install --save-dev jest vue-jest @vue/test-utils

然后，創建一個簡單的Vue組件，其中包含一個默認插槽和一個作用域插槽：

<!-- MyComponent.vue --><template>
  <div>
    <h1>Default Slot:</h1>
    <slot></slot>
    <h2>Scoped Slot:</h2>
    <slot name="scoped" :text="scopedText"></slot>
  </div>
</template><script>
export default {
  data() {
    return {
      scopedText: 'This is some scoped text'
    };
  }
};
</script>

接下來，編寫一個測試文件來測試這個組件的插槽：

// MyComponent.spec.js
import { mount } from '@vue/test-utils';
import MyComponent from './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.find('p').text()).toBe('This is the default slot content');
  });

  it('renders scoped slot content with correct scope', () => {
    const wrapper = mount(MyComponent, {
      scopedSlots: {
        scoped:<template #scoped="props"><p>{{ props.text }}</p></template>'
      }
    });
    expect(wrapper.find('p').text()).toBe('This is some scoped text');
  });
});

在這個測試文件中，我們使用mount函數來掛載MyComponent組件，并通過slots選項提供默認插槽的內容。對于作用域插槽，我們使用scopedSlots選項，并傳遞一個模板字符串，該字符串定義了作用域插槽的內容。

請注意，vue-test-utils的scopedSlots選項在新版本中已被棄用，取而代之的是slots選項，但是你需要使用一個對象來定義作用域插槽，如下所示：

const wrapper = mount(MyComponent, {
  slots: {
    scoped: {
      template:<template #scoped="props"><p>{{ props.text }}</p></template>'
    }
  }
});

確保你的測試運行器配置正確，并且你的Jest配置能夠處理.vue文件。這通常涉及到配置jest.config.js文件以及使用vue-jest預處理器。

這樣，你就可以使用Jest來測試Vue組件的插槽和作用域插槽了。記得在每個測試用例之后清理你的組件實例，以避免潛在的副作用和狀態污染。