如何纠正 vue.js2 中的 isVueInstance is deprecated 错误？ 弃用警告

问题描述

我在 vue.js2 中使用 vue-jest 作为测试用例，我有一个名为 Register.vue 的组件，为此我将测试用例编写为 Register.spec.js ，当我运行 npm t 它运行良好，但我出现以下错误 [errors]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.

解决方法

docs for isVueInstance() 描述了如何处理此警告：

弃用警告

isVueInstance 已弃用，将在未来版本中删除。

依赖于 isVueInstance 断言的测试几乎没有价值。我们建议用有目的的断言替换它们。

为了保持这些测试，isVueInstance() 的有效替代是 wrapper.find(...).vm 的真实断言。

所以你可以简单地断言 wrapper.vm 是 truthy：

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

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