How should I write a test for my Vue component using Jest?

Question

I need to test the component below (login form) for the following:

1. Check for successful login when entering both login and password
2. Checking for an input error when not entering both login and password
3. Check for an input error when entering a login, but not entering a password
4. Checking for an input error when entering a password, but not entering a login.

---

<template>
    <main>
    <div class="main-logo">
        <img src="../../assets/login-img/main_logo.svg" alt="главный логотип" />
    </div>
    <div class="main-form">
        <div class="main-from__title">
        <p class="main-from__title-text">Вход</p>
        </div>
        <form @submit.prevent="login" class="main-form__login">
        <p class="main-form__login-status">{{ this.loginStatus }}</p>
        <input
            class="main-form__login-input main-form__login-input_name"
            id="login"
            v-model="loginForm.username"
            required
            placeholder="Имя"
            type="text"
        />
        <input
            class="main-form__login-input main-form__login-input_password"
            id="password"
            v-model="loginForm.password"
            required
            placeholder="Пароль"
            type="password"
        />
        <input class="main-form__login-submit" v-if="this.loginBtn" type="submit" @click="handleLogin" value="Войти" />

        <input class="main-form__login-submit main-form__login-session" v-if="this.showLogoutEverywhereBtn" type="button" @click="websocketAuth" value="Выйти из других окон" />
        </form>
    </div>
    </main>
</template>
<script>
import { mapState } from 'vuex'
import { socketUrl } from '../../config/url'


export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                username: 'user1',
                password: '123',
            },
        };
    },
    computed: {
        ...mapState({
            loginBtn: state => state.user.loginBtn,
            loginStatus: state => state.user.loginStatus,
            showLogoutEverywhereBtn: state => state.user.showLogoutEverywhereBtn,
        })
    },
    mounted: function () {
        console.log('login showLogoutEverywhereBtn', this.showLogoutEverywhereBtn)
        socketUrl.on('toLogin', () => {
            this.$router.push('/login')
        })
    },
    methods: {
        handleLogin(e) { 
            e.preventDefault() 
            this.$store.dispatch('login', this.loginForm) 
                .then((response) => { 
                    console.log('login page response: ', response)
                    if (response.id_user !== undefined) {
                        this.$router.push({ path: '/' })
                    }
                })
                .catch((e) => { // Если ошибка
                    console.log('ты внутри ошибки: ', e);
                });
        },
        websocketAuth(e) {
            e.preventDefault()
            console.log('login:  ', this.loginForm.username, this.loginForm.password)
            this.$store.dispatch("logoutEverywhere", {
                user_login: this.loginForm.username,
                user_password: this.loginForm.password
            })
                .then((resp) => {
                    let data = { userId: resp, page: 'login' }
                    socketUrl.emit('logoutEverywhere', data, (flag) => {
                    if(flag) {
                        this.$store.dispatch('duplicateLoginClear')
                    }
                    console.log(flag)
                    })

                    console.log('1 ', resp)
                })
        }
    },
};

</script>

Now my test file look like this:

import Vue from 'vue'
import { mount } from '@vue/test-utils'
import Login from '../views/login/index'

// Describe создает блок, который группирует несколько связанных тестов. Например, если объект должен быть вкусным, но не кислым.
describe('Проверяем 4 возможных сценария входа в систему!', () => {
    test('Проверка на успешный вход в систему при вводе и логина и пароля.', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при не вводе и логина и пароля', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при вводе логина, но не вводе пароля', () => {
        expect(true).toBe(true)
    });

    test('Проверка на ошибку входа при вводе пароля, но не вводе логина', () => {
        expect(true).toBe(true)
    });
});

Answer 1

Try testing-library ( still can use jest ). They have a lot of nice examples ( https://testing-library.com/docs/vue-testing-library/examples ).