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

avkwfej4 于 2023-11-15 发布在 Jest

关注(0)|答案(3)|浏览(150)

我想使用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之类的东西挂载小工具的解决方案。

jestjs

来源：https://stackoverflow.com/questions/69215960/cant-access-method-in-vue-single-file-component-with-jest-when-using-script-se

3条答案

按热度按时间

f8rj6qna1#

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

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

defineExpose({
  testMethod
})
</script>

字符串
然后在测试中，通过wrapper.vm（来自@vue/test-utils Package 器的组件示例）访问公开的绑定：

// 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

赞(0）回复(0）举报 2023-11-15

ddhy6vgd2#

如果你使用vue测试@vue/test-utils的mount方法的 Package 器。然后只需要使用(wrapper.vm as any)调用方法就可以了。只有typescript编译器无法识别并引发错误为property does not exist，但是当你尝试使用下面的东西时，它可以工作。
例如：(wrapper.vm as any).someMethod()

赞(0）回复(0）举报 2023-11-15

3hvapo4f3#

我也面临着同样的问题。下面的方法可以帮助我们解决这个问题
1.第一个月
不确定使用_setupProxy是否正确。
1.

import {shallowMount,createLocalVue} from '@vue/test-utils';
import VueCompositionApi from '@vue/composition-api';

const localVue = createLocalVue()
localVue.use(VueCompositionApi)
shallowMount(require('./component.vue').default, {
  localVue,
});

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

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

3条答案

相关问题

热门标签

最新问答