使用 <script setup> 时无法使用 Jest 访问 Vue 单文件组件中的方法

Posted 2023-02-22

【中文标题】使用 <script setup> 时无法使用 Jest 访问 Vue 单文件组件中的方法

【英文标题】：Can't access method in Vue Single File Component with Jest when using <script setup>

【发布时间】：2021-11-11 21:23:24

【问题描述】：

我想使用 Jest 在我的 Vue 单文件组件中测试特定方法。我正在使用 Vue 3 和 Composition API，我想使用 <script setup> 方法，但它似乎可以防止这种情况发生。

这行得通：

组件：

<script>
export default 
  setup() 
    const testMethod = function(input) 
      return input + 1;
    ;
    return  testMethod ;
  ,
;
</script>

测试：

test('should be 2', () => 
  expect(TestComponent.setup().testMethod(1)).toBe(2); // success
);

这不起作用：

组件：

<script setup>
const testMethod = function(input) 
  return input + 1;
;
</script>

测试：

test('should be 2', () => 
  expect(TestComponent.setup().testMethod(1)).toBe(2); // TypeError: Cannot destructure property 'expose' of 'undefined' as it is undefined.
  expect(TestComponent.testMethod(1)).toBe(2); // TypeError: _testComponent.default.testMethod is not a function
);

是否有其他方法可以实现这一点，或者使用 <script setup> 方法无法访问组件内的方法？

编辑：专门寻找不需要使用 vue-test-utils 之类的工具安装小工具的解决方案。

【问题讨论】：

旁注：我确实尝试过使用 defineExpose 但它似乎没有帮助。 v3.vuejs.org/api/sfc-script-setup.html#defineexpose

Composition API 不适合测试实现，请考虑使用 Vue 测试库。在 React 生态系统中也是如此。

【参考方案1】：

<script setup> 中声明的绑定默认是隐藏的，但您可以使用 defineExpose() 将它们中的任何一个公开给组件实例：

// MyComponent.vue
<script setup>
const testMethod = function(input) 
  return input + 1;
;

defineExpose(
  testMethod
)
</script>

然后在您的测试中，通过wrapper.vm（来自@vue/test-utils 包装器的组件实例）访问公开的绑定：

// MyComponent.spec.js
import MyComponent from '@/components/MyComponent.vue'

test('should be 2', () => 
  const wrapper = shallowMount(MyComponent)
  expect(wrapper.vm.testMethod(1)).toBe(2)
)

demo

【讨论】：

我实际上是在专门寻找不需要安装组件和@vue/test-utils 的方法。你知道这是否可能吗？谢谢！

AFAIK，这是不可能的。 <script setup> 声明是按设计关闭的（基于 defineExpose 的文档）。一种解决方法是将这些方法移动到一个 lib 文件中，该文件可以由您的组件的 <script setup> 和您的测试导入。

这就是我的怀疑，谢谢！