我有这个简单的单元测试：
\nimport { describe, it, expect } from 'vitest';\nimport { mount } from '@vue/test-utils';\nimport Login from './Login.vue';\n\ndescribe('Login.spec.js', () => {\n it('mounts correctly', () => {\n const wrapper = mount(Login, {});\n expect(wrapper.isVisible()).toBe(true);\n });\n});\n但我的 Login.vue 组件有：
\n<script setup>\nimport { useHead } from '@vueuse/head';\n\n...\n\nuseHead({\n title: 'Login',\n});\n</script>\n单元测试抛出错误：
\n[Vue warn]: injection "usehead" not found. \n at <Login ref="VTU_COMPONENT" > \n at <VTUROOT>\n[Vue warn]: Unhandled error during execution of setup function \n at <Login ref="VTU_COMPONENT" > \n at <VTUROOT>\n …我正在尝试模拟<select>在 Vitest 测试中的元素中选择一个选项。<select>模拟选择应设置绑定到s的 ref 的值v-model。正如您在下面看到的，我根据此处和互联网上其他地方的其他问题尝试了许多不同的方法，但我就是无法使其在我的情况下发挥作用。
我正在使用以下内容：
我创建了一个非常基本的 Vue 组件，其中包括标题和元素<select>：
<script setup lang="ts">
import { ref } from "vue";
const items = ["item 1", "item 2", "item 3", "item 4", "item 5"];
const selectedItem = ref<string>("");
// this is a placeholder for a more complex function
async function handleSubmit(): Promise<void> {
console.log("in handleSubmit()");
console.log(quotedString(selectedItem.value));
}
// this is just here for a prettier output
function quotedString(s: string): …我有一个包含两个必需道具的组件.单元测试失败,因为我收到以下错误:
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Missing required prop: "heading"
(found in <Root>)
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Missing required prop: "subHeading"
(found in <Root>)
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Missing required prop: "heading"
(found in <Root>)
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Missing required prop: "subHeading"
组件来源:
<template>
<div class="level-item has-text-centered">
<div>
<p class="heading">{{ heading }}</p>
<p class="title">{{ subHeading }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'StatisticsBannerItem',
props: {
heading: {
required: true
},
subHeading: {
required: true
}
}
};
</script> …我是测试和 GraphQL 的新手。我正在尝试使用 vue-test-utils 和 jest 测试使用 GraphQL 的 VueJS 应用程序。我有一个组件，它从挂载的钩子中的 graphql 服务器获取类别。
mounted() {
this.$apollo
.query({
query: getCategories
})
.then(res => {
this.categoriesData[0].options = res.data.categories;
});
}
在我的StepTwo.spec.js中，我将 Vue-apollo 添加到 vue 实例。
const Vue = createLocalVue();
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.use(VueApollo);
test("Step Two ", async () => {
const wrapper = shallowMount(StepTwo, { localVue: Vue });
});
当我尝试安装我的组件时，我得到了
TypeError: Cannot read property 'query' of undefined. 任何帮助，将不胜感激。
因此，setMethods在 Vue-test-utils 中弃用之后，我将测试更改为使用jest.spyOn. 我只想从子组件发出一个事件并检查父组件上调用了相应的方法，但不知何故我的方法从未被调用。
it('calls promptPasswordReset method when forgotten-password event is emitted from LoginForm', () => {
const wrapper = shallowMount(login, { store, localVue })
const promptPasswordResetSpy = jest.spyOn(wrapper.vm, 'promptPasswordReset')
wrapper.findComponent(LoginForm).vm.$emit('forgotten-password')
expect(promptPasswordResetSpy).toHaveBeenCalled()
})
对应的子模板：
<login-form
@login="login"
@sign-up="isSignUpModalActive = true"
@forgotten-password="promptPasswordReset"
>
</login-form>
我不明白，因为当我检查并且间谍On工作时，事件被正确发出wrapper.emitted，因为如果我手动触发该方法，它就会被调用！
我正在尝试对我的 Nuxt/Vue 组件方法进行测试，以检查是否存在错误。
所以我所做的就是为这个感兴趣的方法创建一个“间谍” const spyGetNumberOfResults = jest.spyOn(SearchTable.methods, 'getNumberOfResults')，然后我期待它expect(spyGetNumberOfResults).not.toThrowError()，但是我收到一个奇怪的错误，它说我感兴趣的方法中的一个变量是未定义的。这是错误：
TypeError: Cannot set property 'countLoading' of undefined
571 | async getNumberOfResults () {
572 | // Kick off loader to signal retrieving counts
> 573 | this.countLoading = true;
| ^
574 |
575 | // Initialize count
576 | this.count = '';
at getNumberOfResults (components/core/SearchTable.vue:573:1)
at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:81:11)
at Object.toThrowError (node_modules/expect/build/index.js:342:33)
at Object.<anonymous> (test/SearchTable.spec.js:150:57)
这是我的测试代码：
test(`GET /${MODEL[1][MAIN_MODULES[i]].subModules[j].backEndFilters.mainModule}/${MODEL[1][MAIN_MODULES[i]].subModules[j].backEndFilters.subModule}/`, async () => {
const API_ENDPOINT = process.env.NODE_ENV;
// Initialize …我有一个警报组件，它有一个 flag isVisible，当创建该组件时，该标志变为 true ，并且在创建的 HOOK 中，我有一个在setTimeout组件接收到 DESTROY 布尔属性时启动的警报组件：
props: {
destroy: {
type: Boolean,
default: false,
},
}
data() {
return {
isVisible: false,
}
}
created() {
this.isVisible = true
if (this.destroy) {
setTimeout(() => {
this.isVisible = false
}, 2500)
},
}
我正在使用 VUE UTILS / JEST 来测试组件是否在setTimeout结束后消失，我尝试过：
test('Component dissapears after 2.5 seconds when it receives DESTROY prop', async () => {
const component = wrapper.get('[data-test-id="info-alert-wrapper"]')
await wrapper.setProps({
destroy: true,
})
await …在一个使用Laravel++设置Vue3的Inertia项目中Laravel Mix，我们如何创建前端测试？
特别是，我不知道如何处理' InertiasShare Data和方法？usePage()useForm
我面临的第一个错误是：
TypeError: Cannot read properties of undefined (reading 'someSharedData')
2 |
3 | export const handleSometing = (something) =>
> 4 | usePage().props.value.someSharedData
| ^
5 | ...
6 | )
这里面临一个非常非常烦人的问题。
考虑这里的示例 Vue 组件：
<template>
<div>
Some arbitrary html elements here
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
myObjectProp: {
type: Object,
default: () => {},
},
myArrayProp: {
type: Array,
default: () => [],
},
},
}
</script>
当我使用 vue-test-utils 运行单元测试并显示覆盖率时，覆盖率报告显示我使用工厂函数返回默认 prop 值的行（按照 Vue 规范中的要求）未覆盖。
当然，这会降低测试覆盖率，从而影响我推送代码的能力。特别是对于较小的组件，这个匿名工厂函数将占函数覆盖率的 50%！
我尝试过的：
定义辅助函数：
function resolveProp(args) {
return args;
}
并这样使用：
<script>
export default {
name: 'MyComponent',
components: {},
props: {
myObjectProp: {
type: Object,
default: resolveProp({}),
},
myArrayProp: {
type: …vue.js ×5
jestjs ×4
javascript ×3
unit-testing ×3
vuejs3 ×3
vitest ×2
inertiajs ×1
laravel ×1
nuxt.js ×1
vue-apollo ×1
vuejs2 ×1