面试题：Vue项目TDD实践中Mock数据的处理

Mock策略

分层Mock
- 组件层：在组件单元测试中，重点Mock组件直接依赖的接口返回数据。对于复杂相互关联的数据，根据组件实际使用到的数据部分进行Mock。例如，如果组件只关心接口返回数据中的特定字段，就只Mock这些字段及其相关联的必要数据结构。这样可以减少不必要的Mock数据量，提高测试效率。
- 服务层：如果组件通过服务来调用后端接口，可以在服务层Mock接口响应。这一层的Mock可以更全面地模拟接口返回的完整数据结构，同时可以处理不同接口之间的数据关联关系。例如，一个接口返回用户基本信息，另一个接口返回用户订单信息，在服务层Mock时可以根据业务逻辑建立两者之间的关联，如将订单信息中的用户ID与用户基本信息中的ID对应起来。
数据结构模拟
- 遵循实际接口结构：尽可能按照后端实际接口返回的数据结构来Mock数据，这样能保证测试环境与生产环境的数据一致性。对于复杂嵌套的数据结构，如多层嵌套的JSON对象，要准确Mock每一层的属性和数据类型。例如，如果后端接口返回一个包含用户列表，每个用户又包含地址、联系方式等嵌套信息的结构，Mock数据也要保持同样的结构。
- 简化不必要细节：虽然要遵循实际接口结构，但对于组件测试中不影响业务逻辑的细节可以简化。比如一些后端用于内部标识但组件并不关心的字段，可以设置为简单的固定值，减少Mock数据的复杂度。
依赖隔离
- 使用依赖注入：在Vue组件中通过依赖注入的方式将接口调用函数传入组件。这样在测试时可以很方便地替换为Mock函数，从而隔离组件与实际接口的依赖。例如，在组件的setup函数中接受一个接口调用函数作为参数，在测试时传入Mock的接口调用函数，该函数返回Mock数据。
- 模拟外部依赖：如果组件依赖一些外部库（如HTTP请求库）来调用接口，要模拟这些库的行为。例如，使用Sinon.js来模拟Axios的请求方法，使其返回Mock数据，而不是真正发起网络请求。

可能用到的工具

Sinon.js
- 功能：Sinon.js是一个强大的JavaScript测试间谍、桩和模拟库。在Vue项目中，可以用它来Mock函数，特别是接口调用函数。例如，可以使用Sinon的stub方法来替换Vue组件中实际的接口调用函数，使其返回预设的Mock数据。它还支持对函数的调用进行验证，比如验证接口调用函数是否被正确调用了特定次数，传入的参数是否正确等。
- 示例：

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

describe('MyComponent', () => {
    it('should display correct data from mocked API', async () => {
        const mockData = { key: 'value' };
        const stub = sinon.stub(axios, 'get').resolves({ data: mockData });
        const wrapper = mount(MyComponent);
        await wrapper.vm.$nextTick();
        // 断言组件是否正确显示Mock数据
        expect(wrapper.text()).toContain(mockData.key);
        stub.restore();
    });
});

Vue Test Utils
- 功能：Vue Test Utils是Vue官方提供的用于测试Vue组件的工具集。它提供了mount和shallowMount等方法来挂载组件，并且可以在挂载组件时传入自定义的选项，如provide选项来进行依赖注入。这对于Mock接口数据非常有用，通过依赖注入可以将Mock的接口调用函数传递给组件。
- 示例：

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

const mockApiCall = () => Promise.resolve({ data: { message: 'Mocked message' } });

describe('MyComponent', () => {
    it('should use mocked API call', async () => {
        const wrapper = mount(MyComponent, {
            provide: {
                apiCall: mockApiCall
            }
        });
        await wrapper.vm.$nextTick();
        // 断言组件使用Mock数据后的行为
        expect(wrapper.text()).toContain('Mocked message');
    });
});

JSON Schema Faker
- 功能：当接口返回的数据结构复杂时，JSON Schema Faker可以根据JSON Schema生成Mock数据。如果后端提供了接口数据的JSON Schema定义，使用这个工具可以方便地生成符合该结构的Mock数据。它能自动生成各种数据类型和嵌套结构，减少手动编写Mock数据的工作量，同时保证Mock数据的结构与实际接口一致。
- 示例：

const Ajv = require('ajv');
const faker = require('json-schema-faker');
const schema = {
    type: 'object',
    properties: {
        name: { type:'string' },
        age: { type: 'number' }
    }
};
const ajv = new Ajv();
const validate = ajv.compile(schema);
const mockData = faker.generate(schema);
const valid = validate(mockData);
console.log(mockData);

Mock Service Worker (MSW)
- 功能：MSW是一个用于拦截HTTP请求的库，在前端测试中可以模拟后端API的响应。它可以在浏览器环境和Node.js环境中使用，支持在测试过程中动态地定义Mock响应。对于Vue项目中依赖多个后端接口的情况，可以使用MSW在全局层面定义不同接口的Mock响应，并且可以方便地处理接口之间的依赖关系。例如，可以根据一个接口的Mock响应来动态生成另一个接口的Mock响应，模拟真实的业务场景。
- 示例：

// mocks/server.js
import { rest } from'msw';

export const handlers = [
    rest.get('/api/user', (req, res, ctx) => {
        return res(ctx.json({ name: 'John', age: 30 }));
    }),
    rest.get('/api/orders', (req, res, ctx) => {
        // 可以根据用户接口的Mock数据来生成订单接口的Mock数据
        return res(ctx.json([{ orderId: 1, userId: 1 }]));
    })
];

然后在测试文件中：

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

const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('MyComponent', () => {
    it('should work with mocked APIs', async () => {
        const wrapper = mount(MyComponent);
        await wrapper.vm.$nextTick();
        // 断言组件在Mock接口数据下的行为
        expect(wrapper.text()).toContain('John');
    });
});

星途面试题库

面试题：Vue项目TDD实践中Mock数据的处理

知识考点

面试题答案

Mock策略

可能用到的工具