본문 바로가기

Vue.js46

[vue-test-utils] select html tag 테스트 방법

select 태그를 단위테스트할 경우, 참고: https://v1.test-utils.vuejs.org/api/wrapper/setselected.html setSelected | Vue Test Utils setSelected Selects an option element and updates v-model bound data. When you try to set the value to state via v-model by option.element.selected = true; parentSelect.trigger('input'), v-model is not triggered. v-model is triggered by change event. optio v1.test-utils.vuejs.org s.. 2022. 9. 16.

[vue2]jest 단위테스트 css 파일 문법 오류 에러 해결

Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers... 2022. 9. 8.

[Vue] axios 요청 함수를 호출하는 컴포넌트 테스트

해결 방법 /** * @jest-environment jsdom */ import { shallowMount } from "@vue/test-utils"; import ClassDetailModal from "./ClassDetailModal.vue"; jest.mock("@/src/axios/api/class"); 👈 api 요청 함수 파일 자체를 목킹함. test('', async () => { 데이터 변경 await wrapper.vm.$nextTick(); 👈 비동기 변경된 데이터가 반영된 UI 확인 }) 참고 https://www.daleseo.com/jest-mock-modules/ 2022. 9. 2.

[Vue] 전역 폰트 설정

웹 애플리케이션 폴더에 폰트 저장하고 사용하기 web CDN으로 요청해서 사용하기 적당한 곳에 파일 생성 fonts.css @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100; src: url(https://폰트 주소) format("opentype"), url(https://폰트 주소) format("woff"), url(https://폰트 주소) format("woff2"); } // 똑같은 CDN으로 font-weight를 여러개로 설정할 수 있음. main.js에 import한다. import Vue from "vue"; import App from "./App.vue"; // ... import "@/src/a.. 2022. 9. 1.

[Vue] 단위테스트 환경 만들기

패키지 설치 @vue/test-utils vue-jest @vue/compiler-dom jest babel-core@7 yarn add --dev @vue/test-utils@1.2.1 yarn add --dev vue-jest @vue/compiler-dom jest babel-core@^7.0.0-bridge.0 babel-jest jest.config.js module.exports = { "transformIgnorePatterns": [ "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)" ], transform: { // process `*.vue` files with `vue-jest` ".*\\.(vue)$": "/node_modules/vue-jest",.. 2022. 8. 29.

[jest] scrollTo()가있는 컴포넌트 테스트 에러 해결 방법

console.error Error: Not implemented: window.scrollTo mounted() { > 53 | window.scrollTo(0, localStorage.getItem('offsetTop') || 0); | ^ 해결방법 테스트하는 파일 위에 추가 window.scrollTo = jest.fn(); 2022. 8. 11.

[vue test] nuxt에서 단위 테스트 발생한 오류

$ jest console.error [Vue warn]: Error in render: "SyntaxError: Invalid or unexpected token" found in ---> 테스트를 하려는 컴포넌트에서 발생한 오류임. 2022. 8. 6.

[vue/test-utils] $route를 사용하는 컴포넌트 테스트 방법

다음처럼 설정을 해준다. https://v1.test-utils.vuejs.org/guides/using-with-vue-router.html Using with Vue Router | Vue Test Utils Using with Vue Router Installing Vue Router in tests You should never install Vue Router on the Vue base constructor in tests. Installing Vue Router adds $route and $router as read-only properties on Vue prototype. To avoid this, we can create a localVue, v1.test-utils.vuejs.org.. 2022. 7. 31.

[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요 무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다. 스크롤 위치를 보존하는 방법을 소개한다. 컴포넌트 구조 components +- List.vue 👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장 +- ListItem.vue pages +- index.vue 👈 저장된 스크롤 위치로 mounted 훅에서 이동 pages/index.vue index.vue가 렌더링된 후에 스크롤 위치 이동 export default { name: 'something', mounted() { setTimeout(() => { window.scrollT.. 2022. 6. 1.

[Vue.js] v-html을 사용하지 마세요.

개요 특히, 사용자가 작성해서 제공하는 콘텐츠(ex. 커뮤니티 게시물)에는 사용자가 작성한 글을 그대로 보여주는 목적으로 v-html을 사용하면 안 됩니다. 사용자가 html 작업으로, 게시글을 읽는 사용자에게 공격을 할 수 있기 때문이죠..;; 사용자를 믿으면 안 됩니다. 그래서, v-html 대신, v-text를 주로 사용하고 있습니다. 문제점 어떻게 하면, 개행이 들어간 Javascript 스트링 데이터를 화면에 개행이 표시되게 보여줄 수 있을까. 사용자가 작성한 글에 개행이 있다면, 작성자 의도대로 화면에 개행까지 들어간 양식 그대로를 보여줘야 합니다. 보통 사용자가 작성한 글을 그대로 서버에서 받아오면, 다음처럼 되어 있습니다. "\njohn\n\n2022년ㄹㄹ믿ㅈ랴ㅓㅁ지댜러ㅣㅁ;쟈더리;먀젇리;.. 2022. 5. 27.

티스토리툴바