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.