vue jest(test utils)

vuejsで記述されたコードのテスト
// https://test-utils.vuejs.org/
//1. モジュールのインストール
CMD> npm i @vue/test-utils@next
CMD> npm i @vue/cli-plugin-unit-jest@next
CMD> npm i @vue/vue3-jest
//2. jest.config.jsファイルの作成

module.exports = {
    preset: '@vue/cli-plugin-unit-jest',
    testMatch: ['**/*.spec.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
}

//3. package.jsonファイルで作成:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit --watchAll --verbose",   // 추가하기
    "lint": "vue-cli-service lint"
},

CMD> npm run test
//Login.vue

<template>
    <div>
        <h3>Login</h3>
        <h5>{{msg}}</h5>

        아이디: <input type="text" v-model="userid" /> <br />
        암호: <input type="password" v-model="userpw" /> <br />
        아이디저장: <input type="checkbox" v-model="chk" /> <br />
        <button @click="handleLogin">로그인</button>


    </div>
</template>

<script>
    export default {
        // 부모 컴포넌트(App.vue)에서 전송되어 오는 값
        props : {
            msg: {
                type: String,
                default: '',
            }
        },

        setup() {   // created, methods, data...
            return {
                // 테스트 서버에서 구현이 안됨(데이터를 못 받음)
            }
        },

        data() {    // setup() { const state = reactive({}) }
            return {
                userid : '',    // 아이디
                userpw : 0,    // 암호
                chk : true,     // 체크연결
            }
        },

        methods: {
            handleLogin (){
                // 유효성 검사
                if (this.userid !== '') {
                    return false;
                }

                // 벡엔드 연동
                return true;
            }
        }
        
    }
</script>

<style lang="scss" scoped>

</style>