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来执行测试。这将会测试你的组件是否正确地分发了插槽内容。