如何纠正 isVueInstance is deprecated vue.js2 中的错误？

Question

我在 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.

Answer 1

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

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.

所以你可以简单地断言 wrapper.vm is truthy:

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

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

如何纠正 isVueInstance is deprecated vue.js2 中的错误？

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

vue.js

unit-testing

vuejs2

vue-test-utils

vue-jest

Deprecation warning