0

vue.js2 のテスト ケースに vue-jest を使用しています。Register.vue というコンポーネントが 1 つあります。そのため、Register.spec.js としてテスト ケースを作成しています。npm t を実行すると、正常に動作しますが、次のようになります。エラー [エラー] 1 (ただし、テスト ケースはすべて合格)。このエラーを修正する方法と、失敗したテストケースの書き方の例を教えてください。この問題を修正するのを手伝ってください..

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>
export default {
    name: 'Register',
}
</script>

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);
    })


})

Errors[i am getting when run npm t]

 Register.vue
    √ setup correctly (238ms)
    √ renders a vue instance (817ms)
    √ has an image (419ms)
    √ has a side content (372ms)
    √ has a two title sections (340ms)
    √ has a full name input box (139ms)
    √ has a email input box (69ms)
    √ has a password input box (121ms)
    √ has a eye icons (58ms)
    √ has a mobile input field (56ms)
    √ has a button field (93ms)

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1704
    [vue-test-utils]: contains is deprecated and will be removed in the next major version. Use `wrapper.find`, `wrapper.findComponent` or `wrapper.get` instead.

  console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1704
    [vue-test-utils]: contains is deprecated and will be removed in the next major version. Use `wrapper.find`, `wrapper.findComponent` or `wrapper.get` instead.
4

1 に答える 1