반응형 Vue19 🎲 vue + jest를 이용한 login 구현 🤹🏻♂️ 로그인 기능 > 간단한 로그인을 기능을 구현하고자 하며, 입력값은 id/pw만 존재한다. 🚎 테스트 케이스 id/pw 비어있을 경우 alert을 띄운다. id/pw 입력 후 성공적으로 끝날 경우 main으로 이동 로그인시 정보가 맞지 않는 경우 로그인 api에서 서버에러가 발생 한 경우 🧩 사전작업 * LoginPage.vue를 만든다. * 테스트 할 loginpage.test.js를 만든다 기본적으로 비어있는 vue 파일을 만든다. //loginpage.test.js import LoginPage from '../LoginPage.vue'; import { shallowMount } from '@vue/test-utils'; describe('LoginPage.vue 단위테스트', () =>.. 2023. 4. 11. 🖖 vue jest router 생긴 문제 이번에는 vue-router를 test하는 과정에서 실제 router를 쓰는과정에서 생긴 문제에 대해서 적어보고자 한다. app.test.js에서 실제 router를 import하였고, router.push({name:'todolist'})으로 이동하는 과정에서 ToDoListView가 렌더링되었고, ToDoListView에서 외부함수(axios호출 등등)가 동작하는 일이 일어났다. 여기서 테스트 하고 싶은건 자식 componet가 렌더링 되는것만 확인하고 싶었다. 즉 ToDoListView가 렌더링만 되는지 확인하고 싶었다. 처음에 작성한 코드는 아래와 같다. import App from '@/App.vue'; import { mount } from '@vue/test-utils'; import ToD.. 2023. 3. 16. 👊 vue jest study기록 🦶 패키지 설치 node : 16.8.1 npm : 8.19.2 🤟 vue jest 설치 npm install @vue/test-utils --save-dev npm install @babel/preset-env --save-dev npm install babel-core --save-dev npm install babel-jest npm install jest --save-dev npm install --save-dev jest-environment-jsdom npm install --save-dev jest-transform-stub npm i @vue/vue3-jest --save-dev 🤞 jest.config.js jest.config.js는 jest를 위한 환경설정이다. moduleFileEx.. 2023. 3. 3. 🙎 vue에서 scss를 통해 간단하게 theme별로 관리해보기 🙋♀️ vue.config.js 전역 scss 세팅 reset.scss와 색을 관리하는 _variables.scss, 프로젝트 전에 scss를 관리하는 styles.scss를 전역으로 설정한다. const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { scss: { additionalData: ` @import "~@/assets/styles/reset.scss"; @import "~@/assets/styles/_variables.scss"; @import "~@/assets/styles/styles.scss"; .. 2023. 1. 24. 이전 1 2 3 4 5 다음 반응형
