如何为 Vue 3 项目编写单元测试和集成测试，并利用 `Vue Test Utils` 模拟组件行为？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

晚上好，各位测试界的明日之星！今晚咱们来聊聊 Vue 3 项目的单元测试和集成测试，以及如何用 Vue Test Utils 玩转组件模拟。

开场白：为什么我们需要测试？

想象一下，你辛辛苦苦写了一个炫酷的 Vue 组件，功能强大，界面美观。但是，你敢打包票它在任何情况下都能正常运行吗？用户可能会以各种奇葩的方式使用你的组件，输入各种意想不到的数据。如果没有测试，你的组件就像一颗定时炸弹，随时可能爆炸，给用户带来糟糕的体验。

所以，测试的目的很简单：确保你的代码按照预期工作，并且在未来修改代码时，能够及时发现潜在的问题。 就像给你的代码买了一份保险，避免出事故。

第一幕：单元测试，微观世界的守卫者

单元测试，顾名思义，就是针对代码中最小的可测试单元进行测试。在 Vue 项目中，这个单元通常是一个组件、一个函数或者一个模块。单元测试的目标是隔离被测单元，模拟它的依赖项，然后验证它的行为是否符合预期。

单元测试的特点：
- 快速： 单元测试运行速度快，可以频繁执行。
- 隔离： 隔离被测单元，避免与其他模块的耦合。
- 精准： 精确定位问题，方便调试。
单元测试的工具：
- Jest： 一个流行的 JavaScript 测试框架，功能强大，易于使用。
- Vitest： 与 Vite 集成的测试框架，速度快，配置简单。
- Vue Test Utils： Vue 官方提供的测试工具库，方便我们测试 Vue 组件。

1.1 安装 Jest 和 Vue Test Utils:

首先，我们需要安装 Jest 和 Vue Test Utils。

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

或者使用 Yarn：

yarn add --dev jest @vue/test-utils @vue/compiler-sfc

1.2 配置 Jest:

在项目根目录下创建一个 jest.config.js 文件，并添加以下配置：

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'ts',
    'tsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\.vue$': '@vue/vue3-jest',
    '.+\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  transformIgnorePatterns: ['/node_modules/']
}

moduleFileExtensions: 指定 Jest 可以识别的文件扩展名。
transform: 指定如何转换不同类型的文件。
moduleNameMapper: 配置模块别名，方便在测试代码中使用 @/ 引用 src 目录下的文件。
snapshotSerializers: 用于序列化 Vue 组件的快照。
testMatch: 指定 Jest 搜索测试文件的规则。
testURL: 指定测试环境的 URL。
transformIgnorePatterns: 指定不需要转换的文件。

1.3 第一个单元测试：测试一个简单的 Vue 组件

假设我们有一个简单的 Vue 组件 Counter.vue：

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

接下来，创建一个测试文件 tests/unit/Counter.spec.js：

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

describe('Counter.vue', () => {
  it('should increment count when button is clicked', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.find('span').text()).toBe('1')
  })
})

mount: Vue Test Utils 提供的一个函数，用于挂载 Vue 组件。
wrapper: 一个包含被挂载组件的包装器对象，提供了各种方法来访问和操作组件。
find: 在组件中查找指定的元素。
trigger: 触发元素的事件。
text: 获取元素的文本内容。
expect: Jest 提供的一个函数，用于断言测试结果。

1.4 运行单元测试:

在 package.json 文件中添加一个 test:unit 脚本：

{
  "scripts": {
    "test:unit": "jest --config jest.config.js"
  }
}

然后运行以下命令：

npm run test:unit

或者使用 Yarn：

yarn test:unit

如果一切顺利，你应该看到测试通过的提示。

第二幕：集成测试，整体功能的验证者

集成测试的目标是测试多个组件或模块之间的交互。它比单元测试的范围更大，也更接近用户的真实使用场景。

集成测试的特点：
- 范围广： 测试多个组件或模块之间的交互。
- 真实性： 更接近用户的真实使用场景。
- 复杂性： 比单元测试更复杂，调试难度也更大。
集成测试的工具：
- 可以使用 Vue Test Utils 结合 Jest 或 Vitest 进行集成测试。
- 也可以使用 Cypress 或 Playwright 等端到端测试工具。

2.1 集成测试的例子：测试父子组件的交互

假设我们有两个组件：Parent.vue 和 Child.vue。

Child.vue:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Parent.vue:

<template>
  <div>
    <Child :message="parentMessage" />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const parentMessage = ref('Hello from Parent')

    const updateMessage = () => {
      parentMessage.value = 'Message Updated!'
    }

    return {
      parentMessage,
      updateMessage
    }
  }
}
</script>

创建一个测试文件 tests/unit/Parent.spec.js:

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

describe('Parent.vue', () => {
  it('should update child component message when button is clicked', async () => {
    const wrapper = mount(Parent)
    await wrapper.find('button').trigger('click')
    expect(wrapper.findComponent({ name: 'Child' }).props('message')).toBe('Message Updated!')
  })
})

findComponent: Vue Test Utils 提供的一个函数，用于查找组件实例。
props: 获取组件的 props。

第三幕：Vue Test Utils 的高级技巧：模拟组件行为

Vue Test Utils 提供了强大的模拟功能，可以帮助我们在测试中隔离被测组件，并模拟它的依赖项。

3.1 模拟 Props:

在测试组件时，我们可以通过 props 选项来传递 props 给被测组件。

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

describe('MyComponent.vue', () => {
  it('should render the correct message', () => {
    const wrapper = mount(MyComponent, {
      props: {
        message: 'Hello World!'
      }
    })
    expect(wrapper.text()).toContain('Hello World!')
  })
})

3.2 模拟 Emit:

我们可以使用 emitted 方法来检查组件是否触发了指定的事件。

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

describe('MyComponent.vue', () => {
  it('should emit an event when button is clicked', async () => {
    const wrapper = mount(MyComponent)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('my-event')).toBeTruthy()
  })
})

3.3 模拟 Slots:

我们可以使用 slots 选项来传递 slots 给被测组件。

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

describe('MyComponent.vue', () => {
  it('should render the slot content', () => {
    const wrapper = mount(MyComponent, {
      slots: {
        default: '<span>This is a slot</span>'
      }
    })
    expect(wrapper.find('span').exists()).toBe(true)
  })
})

3.4 模拟 Provide/Inject:

我们可以使用 global 选项中的 provide 属性来模拟 provide，然后在测试组件中使用 inject 来访问提供的值。

// Parent Component (Providing)
<script>
import { provide, ref } from 'vue';

export default {
  setup() {
    const message = ref('Initial Message');
    provide('myMessage', message);

    return {};
  },
  template: '<div><slot /></div>'
};
</script>

// Child Component (Injecting)
<script>
import { inject } from 'vue';

export default {
  setup() {
    const myMessage = inject('myMessage');
    return { myMessage };
  },
  template: '<div>{{ myMessage.value }}</div>'
};
</script>

测试代码：

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

describe('Provide/Inject', () => {
  it('should inject the provided message', () => {
    const wrapper = mount(Child, {
      global: {
        provide: {
          myMessage: { value: 'Mocked Message' } // 模拟 provide 的值
        }
      }
    });
    expect(wrapper.text()).toBe('Mocked Message');
  });

  it('should inject the provided message from a parent component', () => {
    const wrapper = mount(Parent, {
      global: {
        components: {
          Child
        }
      },
      slots: {
        default: Child
      }
    });
    expect(wrapper.findComponent(Child).text()).toBe('Initial Message');
  });

  it('should mock the injected message if the parent does not provide it', () => {
    const wrapper = mount(Child, {
      global: {
        provide: {
          myMessage: {value: 'Overridden'}
        }
      }
    });
    expect(wrapper.text()).toBe('Overridden');
  });
});

3.5 模拟 Global Properties (例如 $route, $store):

Vue 3 移除了组件实例上的 $root, $parent 和 $children 属性，并在 app.config.globalProperties 上提供了全局 property。因此，您需要通过 global 选项中的 mocks 属性来模拟它们。

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

describe('MyComponent.vue', () => {
  it('should render the route path', () => {
    const wrapper = mount(MyComponent, {
      global: {
        mocks: {
          $route: {
            path: '/test-route'
          }
        }
      }
    });
    expect(wrapper.text()).toContain('/test-route');
  });

  it('should dispatch an action to the store', async () => {
    const mockStore = {
      dispatch: jest.fn()
    };
    const wrapper = mount(MyComponent, {
      global: {
        mocks: {
          $store: mockStore
        }
      }
    });

    await wrapper.find('button').trigger('click');
    expect(mockStore.dispatch).toHaveBeenCalledWith('myAction');
  });
});

3.6 模拟异步操作:

我们可以使用 async/await 和 flushPromises 来测试异步操作。

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

describe('MyComponent.vue', () => {
  it('should update the message after a delay', async () => {
    const wrapper = mount(MyComponent)
    // Simulate a delayed update.  In a real component, you would probably
    // call an API here.
    setTimeout(() => {
      wrapper.setData({ message: 'Updated Message' })
    }, 100)

    // Wait for all pending promises to resolve.
    await flushPromises()

    expect(wrapper.text()).toContain('Updated Message')
  })
})

3.7 Mocking Modules

有时候，你的组件依赖于外部模块，而你只想测试组件本身，而不是模块的功能。这时，你可以使用 jest.mock 来模拟这些模块。

假设组件依赖于一个名为 api.js 的模块，它负责从服务器获取数据。

api.js:

export const fetchData = async () => {
  // 模拟 API 调用
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: 'Real Data from API' });
    }, 500);
  });
};

MyComponent.vue:

<template>
  <div>{{ data }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { fetchData } from './api';

export default {
  setup() {
    const data = ref('Loading...');

    onMounted(async () => {
      const response = await fetchData();
      data.value = response.data;
    });

    return { data };
  }
};
</script>

测试代码：

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import { flushPromises } from '@vue/test-utils';
import * as api from '@/components/api';  // Import the actual module for type checking

jest.mock('@/components/api'); // 模拟整个模块

describe('MyComponent.vue with Mocked Module', () => {
  it('should display mocked data from API', async () => {
    const mockedData = { data: 'Mocked Data from API' };
    (api.fetchData as jest.Mock).mockResolvedValue(mockedData);  // Type assertion for jest.Mock
    //api.fetchData.mockResolvedValue(mockedData); // Provide a mock implementation

    const wrapper = mount(MyComponent);
    await flushPromises(); // 等待异步操作完成
    expect(wrapper.text()).toContain('Mocked Data from API');
    expect(api.fetchData).toHaveBeenCalledTimes(1); // 验证 fetchData 是否被调用
  });
});

第四幕：测试策略和最佳实践

测试金字塔： 建议采用测试金字塔的策略，即多写单元测试，少写集成测试，更少写端到端测试。
覆盖率： 追求合理的测试覆盖率，但不要盲目追求 100% 覆盖率。
可读性： 编写易于阅读和理解的测试代码。
可维护性： 编写易于维护的测试代码，避免过度耦合。
持续集成： 将测试集成到持续集成流程中，确保每次代码提交都会自动运行测试。

总结：测试，代码质量的守护神

单元测试和集成测试是保证 Vue 项目质量的重要手段。通过编写测试，我们可以尽早发现问题，避免在生产环境中出现意外情况。Vue Test Utils 提供了强大的工具和方法，帮助我们轻松地测试 Vue 组件，并模拟它们的行为。

记住，测试不是负担，而是对代码质量的投资。编写高质量的测试代码，可以让你更加自信地交付可靠的 Vue 应用。

好了，今晚的讲座就到这里。希望大家在测试的道路上越走越远，成为真正的代码质量守护神！下次再见！

发表回复 取消回复

发表回复取消回复