使用<script setup>时Jest无法访问Vue单文件组件方法如何解决

原因说明 #

<script setup> 是Vue3的编译时语法糖，默认是闭包设计，内部定义的方法、变量如果没有显式对外暴露，外部无法直接访问，所以你之前直接调用组件setup方法或者访问组件静态方法的写法都会报错。

以下是两种无需挂载组件、不依赖vue-test-utils的可行方案：

方案1：纯逻辑抽离独立文件（最推荐） #

把和组件视图、响应式逻辑无关的纯业务方法抽离为单独的js/ts文件，组件和测试用例分别引入使用即可，完全不需要涉及组件运行环境。
示例：

1. 新建logic.js，存放公共方法：

export const testMethod = function(input) {
  return input + 1;
}

2. 组件内引入使用：

<script setup>
import { testMethod } from './logic.js'
// 组件内直接调用testMethod即可
</script>

3. 测试用例直接引入方法测试：

import { testMethod } from './logic.js'

test('should be 2', () => {
  expect(testMethod(1)).toBe(2);
});

方案2：单文件组件双script块导出方法 #

如果不想拆分文件，可以在单文件组件内同时声明普通<script>块和<script setup>块，在普通script块中定义要测试的方法并具名导出，<script setup>块内引入自身的导出即可。
示例：

1. 组件代码：

<!-- 普通script块用来导出要测试的方法 -->
<script>
export const testMethod = function(input) {
  return input + 1;
};
export default {
  // 可填写组件name、inheritAttrs等配置项
}
</script>

<!-- 原有的<script setup>逻辑 -->
<script setup>
import { testMethod } from './当前组件文件名.vue'
// 组件内直接使用testMethod即可
</script>

2. 测试用例直接引入组件的具名导出测试：

import { testMethod } from './TestComponent.vue'

test('should be 2', () => {
  expect(testMethod(1)).toBe(2);
});

额外说明 #

如果你的方法本身依赖组件的响应式变量、生命周期等上下文，那还是建议使用vue-test-utils挂载组件后通过expose出来的方法测试，这是符合单测规范的写法。如果是纯逻辑方法，优先选择方案1即可。

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