如何在每个测试中以不同方式模拟用户模块？答案

【问题标题】：How to mock a user module differently in each test?如何在每个测试中以不同方式模拟用户模块？
【发布时间】：2019-11-27 17:52:57
【问题描述】：

我的 Vue 组件有以下单元测试：

import { shallowMount } from '@vue/test-utils';
import OrganizationChildren from './OrganizationChildren.vue';

describe('OrganizationChildren', () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it('passes', () => {
    jest.doMock('@/adonis-api', () => {
      return {
        organization: {
          family(id) {
            return {
              descendants: [],
            };
          },
        },
      };
    });

    const wrapper = shallowMount(OrganizationChildren, {
      propsData: {
        org: {
          id: 1,
        },
      },
    });
  });
});

而在 Vue 组件中，它是 import { organization } from '@/adonis-api';。我暂时只是 console.logging 导入的organization 对象，以确保它是正确的。但我可以看到它没有使用我指定的模拟版本。我究竟做错了什么？我的目标是在每个 it() 块中以不同方式模拟 family 方法，以测试如果 descendants 为空、包含 5 个项目、100 个项目等会发生什么。

【问题讨论】：

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

解决了！事实证明，我遇到了几个问题：

没有正确模拟@/adonis-api。我应该提到它只模拟顶层的东西，所以我不得不在jest.mock 中使用工厂函数（见下文）。
我需要一个await flushPromises() 以允许模板在其created() 方法评估我的模拟函数并将结果存储在this.children 之后重新渲染。

全面测试：

import { shallowMount, config } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import OrganizationChildren from './OrganizationChildren.vue';
import { organization } from '@/adonis-api';

jest.mock('@/adonis-api', () => ({
  organization: {
    family: jest.fn(),
  },
}));

describe('OrganizationChildren', () => {
  config.stubs = {
    'el-tag': true,
  };

  it('shows nothing when there are no children', async () => {
    organization.family.mockResolvedValueOnce({
      descendants: [],
    });

    const wrapper = shallowMount(OrganizationChildren, {
      propsData: {
        org: {
          id: 1,
        },
      },
    });

    await flushPromises();
    const h4 = wrapper.find('h4');

    expect(h4.exists()).toBe(false);
  });

  it('shows children when provided', async () => {
    organization.family.mockResolvedValueOnce({
      descendants: [{ name: 'One' }, { name: 'Two' }],
    });

    const wrapper = shallowMount(OrganizationChildren, {
      propsData: {
        org: {
          id: 1,
        },
      },
    });

    await flushPromises();
    const h4 = wrapper.find('h4');
    const list = wrapper.findAll('el-tag-stub');

    expect(h4.exists()).toBe(true);
    expect(list.length).toBe(2);
    expect(list.at(0).text()).toBe('One');
    expect(list.at(1).text()).toBe('Two');
  });
});

【讨论】：