Test code 쉽게 쓰기 - 1

목차

• 1. vscode snippet 이란?
• 2. vscode snippet 사용하기

📌 1. vscode snippet 이란?

미리 지정해둔 예약어로 코드를 생성하는 기능 입니다. 이기능을 사용하여 일일이 쳐야하는 describe('', () => {})와 it('', () => {})
를 자동적으로 생성해보겠습니다.

📌 2. vscode snippet 사용하기

설정

먼저 Code > Preferences > User Snippets로 이동합니다.

file이름을 정의하고 javascript로 설정합니다.

그럼 이런 파일이 열리게 됩니다.

이제 이렇게 예약어를 등록할 수 있습니다.

    "describe": { // 제목
        "prefix": "desc", // 예약어
        "body": "describe('$0', () => {\n\n})", // 코드
        "description": "autocomplete describe jest" // 설명
    },
    "test": {
        "prefix": "te",
        "body": "it('$0', () => {\n\n})", // $0는 커서를 저기로 옮김
        "description": "autocomplete test jest"
    }

제목은 말그대로 제목입니다. prefix는 예약어를 설정하는 것 입니다. 이제 prefix를 입력후 엔터를 누르게 되면 body로 등록해둔 codes가 나오게 됩니다. description은 예를 들어 desc를 입력하고 엔터 치기 전에 나오는 설명입니다.

📌 추가: storybook snippets

}
"describe": {
        "prefix": "desc",
        "body": "describe('$0', () => {\n\n});",
        "description": "autocomplete describe jest"
    },
    "test": {
        "prefix": "te",
        "body": "it('$0', () => {\n\n});",
        "description": "autocomplete test jest"
    },
    "storybook template": {
        "prefix": "stb",
        "body": "import { storiesOf } from '@storybook/vue';\n\nstoriesOf('$0', module)"
    },
    "storybook add": {
        "prefix": "stad",
        "body": ".add('$0', () => ({\ndata:()=>({}),\ncomponents:{},\nmethods:{},\ntemplate:``\n}))"
    }
}