0

我有一个负责注册用户的组件，我使用 vue-jest 为该组件编写测试用例，我为该 Register 组件编写了一些测试用例，当我运行 npm t 它显示以下[errors]但所有测试案例应该通过，如何解决这个错误请帮我解决这个问题

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',
}
4

1 回答 1

1

contains警告本身和描述如何解决问题的文档：

弃用警告

Usingcontains已弃用，将在未来的版本中删除。用于findDOM 节点（使用querySelector语法）、findComponent组件或wrapper.get替代。

由于您的所有测试都使用containswithquerySelector语法，因此请替换wrapper.contains为wrapper.find，并替换toBe(true)为toBeTruthy()。

于 2021-06-26T02:55:41.970 回答