0

我在 vue.js2 中将 vue-jest 用于测试用例，我有一个名为 Register.vue 的组件，为此我将测试用例编写为 Register.spec.js ，当我运行 npm t 时它运行良好，但我得到了关注errors [ 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.
4

1 回答 1

1

的文档isVueInstance()描述了如何处理此警告：

弃用警告

isVueInstance已弃用，并将在以后的版本中删除。

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

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

所以你可以简单地断言它wrapper.vm是真实的：

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

  // ✅
  expect(shallowMount(Register).vm).toBeTruthy();
})
于 2021-06-25T21:33:27.180 回答