如何用jest+vue-test-utils测试依赖globalProperties的Vuex Action

问题根源 #

你在jest.init.js中配置的config.global.mocks是给Vue组件测试用的，用于挂载组件时注入模拟的实例属性（比如this.$filters）。但你的Vuex Action是直接调用的独立函数，它直接访问全局的global.dashboards对象，不会走Vue组件的上下文，所以这个mock配置不会生效。

解决方案 #

方案1：直接在测试中模拟全局global.dashboards #

在测试文件中，直接给Jest的global对象添加dashboards属性，模拟需要的$filters结构：

describe('test: actions', () => {
  // 在所有测试前初始化全局mock
  beforeEach(() => {
    global.dashboards = {
      $filters: {
        currency: (value) => value // 可根据测试需求自定义返回值，比如模拟货币格式化
      }
    };
  });

  // 测试后清理，避免影响其他测试用例
  afterEach(() => {
    delete global.dashboards;
  });

  it('buildReservationsTableData', () => {
    let data = actions.buildReservationsTableData(mockDataBefore);
    expect(data).toEqual(tableData);
  });
});

方案2：重构Action，降低全局依赖（推荐） #

直接依赖全局对象不利于代码可维护性和测试灵活性，建议将$filters作为参数传入Action函数：

修改待测试的Action代码：

buildReservationsTableData(channelsData, filters = global.dashboards.$filters) {
  // ... 原有代码不变，仅把所有`global.dashboards.$filters`替换为`filters`
  if (key == "totalAmount"){
    record[key] = filters.currency(channelsData[idx][key]);
  }
  // ...
}

然后在测试中直接传入模拟的filters：

describe('test: actions', () => {
  it('buildReservationsTableData', () => {
    // 自定义模拟的filters逻辑
    const mockFilters = {
      currency: (val) => `$${val.toFixed(2)}`
    };
    let data = actions.buildReservationsTableData(mockDataBefore, mockFilters);
    expect(data).toEqual(tableData);
  });
});

方案3：如果是标准Vuex Action（带context） #

如果你的Action是标准Vuex Action（第一个参数为context），可以在创建测试用Store时，将$filters注入到上下文：

import { createStore } from 'vuex';

describe('test: actions', () => {
  it('buildReservationsTableData', () => {
    const store = createStore({
      // ... 你的Store配置
      actions: {
        buildReservationsTableData(context, payload) {
          // 给context注入模拟的$filters
          context.$filters = {
            currency: (val) => val
          };
          return actions.buildReservationsTableData(context, payload);
        }
      }
    });

    // 调用Action并断言结果
    return store.dispatch('buildReservationsTableData', mockDataBefore)
      .then(data => {
        expect(data).toEqual(tableData);
      });
  });
});

总结 #

优先选择方案2重构代码，减少全局依赖，让测试更灵活；如果暂时无法重构，方案1可以快速解决测试报错问题。

内容的提问来源于stack exchange，提问作者Gabriella Tavares