如何用Jest测试Vue组件计算属性setter的自定义错误抛出逻辑

看起来你遇到的核心问题是：Vue组件计算属性的setter在测试中没有被调用，导致无法验证无效值时抛出EnumError的逻辑。我们一步步来排查和解决：

一、先确认setter是否真的未被调用 #

首先要排除“误以为setter没调用”的情况：在组件的sort计算属性setter开头加一行调试日志：

set(value) {
  console.log('Sort setter triggered with value:', value); // 新增调试日志
  if (value === 'none' || value === 'by-date' || value === 'by-ratings') {
    this.sortData = value
    this.$emit('sortChange', value)
  } else {
    throw new EnumError('(Component::SortPanel): Sort property is of type Enum. ' + 'It excepts either none, by-date or by-ratings values.')
  }
}

然后运行测试，查看控制台是否有对应的输出。如果有输出，说明setter其实被调用了，问题出在测试断言或EnumError的处理上；如果没有输出，再往下排查。

二、如果setter确实未被调用：排查组件挂载与计算属性定义 #

1. 检查计算属性定义是否正确：确保sort计算属性确实在组件的computed选项下，没有拼写错误（比如写成compute而非computed），也没有和data/props中的属性重名（你的情况里data是sortData，没问题）。
2. 检查组件挂载是否正常：确认shallow(SortPanel)中的SortPanel是正确导入的组件，没有导入错误的文件或未注册的组件。可以在测试中先断言计算属性存在：

it('should have sort computed property', () => {
  expect(typeof sortPanel.vm.sort).toBe('string');
  expect(sortPanel.vm.sort).toBe('none');
});

如果这个断言失败，说明组件挂载有问题，计算属性未被正确初始化。

三、如果setter被调用，但测试未捕获到错误 #

这种情况更常见，通常是以下两个原因：

1. EnumError未在测试文件中正确引入/定义 #

如果EnumError是你自定义的错误类，必须在测试文件中确保它能被访问到：

• 如果是单独文件导出的，需要导入：

import EnumError from '@/path/to/EnumError';

• 如果是在组件内部定义的，需要在测试文件中重新定义（或者导出到外部）：

class EnumError extends Error {
  constructor(message) {
    super(message);
    this.name = 'EnumError';
    Object.setPrototypeOf(this, EnumError.prototype); // 确保原型链正确
  }
}

否则测试中的toThrow(EnumError)会因为找不到该类而断言失败。

2. Vue的全局错误处理干扰了测试断言 #

Vue会自动捕获组件中的错误并打印到控制台，但不会阻止错误抛出。不过为了避免测试时控制台被错误信息刷屏，可以临时屏蔽Vue的错误输出：

beforeEach(function() {
  // 屏蔽Vue的错误日志，避免干扰测试
  jest.spyOn(console, 'error').mockImplementation(() => {});
  sortPanel = shallow(SortPanel);
});

afterEach(function() {
  // 恢复控制台错误输出
  console.error.mockRestore();
});

3. 确保断言的写法正确 #

你的断言写法是对的（用箭头函数包裹赋值操作），但再确认一下：

it('should throw EnumError when setting invalid sort value', function() {
  expect(() => { sortPanel.vm.sort = 'anything' }).toThrow(EnumError);
  // 也可以用错误名称或消息来断言，作为备选：
  // expect(() => { sortPanel.vm.sort = 'anything' }).toThrow('Sort property is of type Enum');
});

如果用错误名称断言，要确保EnumError的name属性正确设置为'EnumError'。

四、额外验证：直接调用setter逻辑 #

如果还是有问题，可以跳过Vue的计算属性，直接测试setter的逻辑：

it('should throw EnumError for invalid sort values', () => {
  const testSet = (value) => {
    if (value === 'none' || value === 'by-date' || value === 'by-ratings') {
      // 模拟setter的正确分支
    } else {
      throw new EnumError('(Component::SortPanel): Sort property is of type Enum. ' + 'It excepts either none, by-date or by-ratings values.')
    }
  };

  expect(() => testSet('anything')).toThrow(EnumError);
});

这个测试能验证你的错误抛出逻辑本身是否正确，如果这个测试通过，说明问题还是出在Vue计算属性的调用流程上。

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