How to rectify isVueInstance is deprecated error in vue.js2?

275 Views Asked by At

i am using vue-jest for test cases in vue.js2 , i have one component called Register.vue , for that i am wrighting test cases as Register.spec.js ,when i run npm t it's running fine but i am getting following errors [errors]1(but test cases are all passed). How to rectify this error and please give me one example how to write failure testcase , please help me to fix this issue ..

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.
1

There are 1 best solutions below

0
On BEST ANSWER

The docs for isVueInstance() describes how to handle this warning:

Deprecation warning

isVueInstance is deprecated and will be removed in future releases.

Tests relying on the isVueInstance assertion provide little to no value. We suggest replacing them with purposeful assertions.

To keep these tests, a valid replacement for isVueInstance() is a truthy assertion of wrapper.find(...).vm.

So you can simply assert that wrapper.vm is truthy:

it('renders a vue instance', () => {
  // ❌ isVueInstance deprecated
  //expect(shallowMount(Register).isVueInstance()).toBe(true);

  // ✅
  expect(shallowMount(Register).vm).toBeTruthy();
})