问题描述
我有一个组件负责注册用户，我使用 vue-jest 为该组件编写测试用例，我为该注册组件编写了一些测试用例，当我运行 npm t 时，它显示如下{{3}但是所有的测试用例都应该通过，如何解决这个错误请帮我解决这个问题
Register.spec.js
import Register from '../../src/Pages/Register.vue';
import { createLocalVue,shallowMount} from '@vue/test-utils'
describe('Register.vue',()=>{
let wrapper;
beforeEach(() => {
const localVue = createLocalVue();
wrapper = shallowMount(Register,localVue);
});
test('setup correctly',() => {
expect(true).toBe(true)
})
it('renders a vue instance',() => {
expect(shallowMount(Register).vm).toBeTruthy();
})
it('has an image',() => {
expect(wrapper.contains('#side-img')).toBe(true);
});
it('has a side content',()=>{
expect(wrapper.contains('#side-content')).toBe(true);
});
it('has a two title sections',()=>{
expect(wrapper.contains('#signup')).toBe(true);
expect(wrapper.contains('#login')).toBe(true);
});
it('has a full name input Box',()=>{
expect(wrapper.contains('#name-input')).toBe(true);
});
it('has a email input Box',()=>{
expect(wrapper.contains('#Email-input')).toBe(true);
});
it('has a password input Box',()=>{
expect(wrapper.contains('#passField')).toBe(true);
});
it('has a eye icons',()=>{
expect(wrapper.contains('#togglePassword')).toBe(true);
});
it('has a mobile input field',()=>{
expect(wrapper.contains('.telephone')).toBe(true);
});
it('has a button field',()=>{
expect(wrapper.contains('.btn-section')).toBe(true);
})
})
Register.vue
<template>
<div class="main">
<div class="container">
<img id="side-img" src="../assets/sideImg.png" alt="notFound" />
<p id="side-content">Online Book Shopping</p>
<div class="Box">
<div class="headings">
<h5 class="signin" id="login" :class="{ active: isLogin }" @click="isLogin = true">Login</h5>
<h5 class="signup" id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
</div>
<form ref="myForm" @submit.prevent="handlesubmit">
<div class="fullname">
<p>FullName</p>
<input type="name" id="name-input" class="nameBox" required v-model="fullName" autocomplete="off" pattern="[A-Za-z]{3,12}">
</div>
<div class="username">
<p>EmailID</p>
<input type="email" id="Email-input" class="emailBox" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
<div class="password-section">
<p>Password</p>
<input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
<i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
</div>
<div class="mobile">
<p>MobileNumber</p>
<input type="tel" class="telephone" v-model="mobile" id="tel" pattern="^\d{10}$" required>
</div>
<button class="btn-section" id="btn" type="submit">Signup</button>
</form>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
name: 'Register',}
解决方法
警告本身和 contains 的文档描述了如何解决问题：
弃用警告
不推荐使用 contains，并将在未来版本中删除。对 DOM 节点使用 find（使用 querySelector 语法），对组件使用 findComponent，或者改为使用 wrapper.get。
由于您的所有测试都使用 contains 和 querySelector 语法，请将 wrapper.contains 替换为 wrapper.find，并将 toBe(true) 替换为 toBeTruthy()。