Produtividade com Testes e Vue usando VSCode

Criar testes bem organizados, separados e com uma boa descrição no Jest ou inserir toda estrutura inicial padrão de um componente Vue, pode ser verboso. Mas configurando o VS Code é possível inserir automaticamente toda pré-estrutura com a escrita de apenas uma palavra.

Desenvolvendo com o Visual Studio Code você pode turbinar sua produtividade de uma forma muito simples com Snippets!

Como funciona?

Os snippets salvos no seu VS Code geram códigos pré-definidos ao digitar uma determinada palavra escolhida na sua configuração.

Como criar um snippet

Com o VS Code aberto vá em File -> Preferences -> Configure User Snippets

Na paleta de comandos aberta digite a linguagem para qual deseja exibir o snippet, no caso de testes Jest digite typescript se for sua linguagem utilizada.

Será aberto um arquivo typescript.json com instruções para criar seu snippet.

Cada snippet tem a seguinte estrutura:

"Nome do Snippet": {
        "prefix": // Palavra que chama o snippet,
        "body": [
            // Corpo com o código a ser gerado         
        ],
        "description": // Descrição com detalhes do código
},

Ao escrever o body, em linhas que houver indentação use \t para aplicar a tabulação necessária. Cada \t representa um Tab.

Para indicar as pausas do Tab para digitação de texto pelo código use $1, substituindo o número pela ordem de inserção desejada em cada trecho.

Também é possível indicar o tipo de conteúdo a ser inserido em cada pausa com ${1:conteudo} dando uma ideia do que escrever. E para definir um texto igual a ser usado em várias partes do código use o mesmo número de ID em todas partes que o texto for repetir.

Abaixo montei um snippet completo para Jest usando BDD que você pode aproveitar nos seus códigos ou adaptar como preferir:

	// No VS CODE ir em File -> Preferences -> Configure User Snippets -> Typescript
	//Arquivo typescript.json:
	{
	"Jest/Vitest Describe Unity": {
	"prefix": "describe unity",
	"body": [
	"describe('${1:nomeComponent}', ()=> {",
	"\tdescribe('🧪 Unidade:', ()=> {",
	"\t\ttest('Dado ${2:contexto} Quando ${3:eventos} Então ${4:resultado}', () => {",
	"\t\t\t$5",
	"\t\t})",
	"\t})",
	"})"
	],
	"description": "Define os describes de um teste jest de Unidade padrão BDD"
	},
	"Jest/Vitest Describe Integration/Component": {
	"prefix": "describe integ",
	"body": [
	"describe('${1:nomeComponent.vue}', ()=> {",
	"\tdescribe('Integração/Componente', ()=> {",
	"\t\tdescribe('👀 Renderização:', ()=> {",
	"\t\t\t$2",
	"\t\t})",
	"\t\tdescribe('🧠 Comportamento:', ()=> {",
	"\t\t\t$3",
	"\t\t})",
	"\t\tdescribe('🐕 Navegação:', ()=> {",
	"\t\t\t$4",
	"\t\t})",
	"\t})",
	"})"
	],
	"description": "Define os describes de um teste jest de Integração e Componente"
	},
	"Jest/Vitest Test BDD": {
	"prefix": "testbdd",
	"body": [
	"test('Dado ${1:contexto} Quando ${2:eventos} Então ${3:resultado}', () => {",
	"\t$4",
	"})"
	],
	"description": "Define um Teste escrito com BDD"
	},
	"Jest/Vitest Test Async BDD": {
	"prefix": "testbdd-asyn",
	"body": [
	"test('Dado ${1:contexto} Quando ${2:eventos} Então ${3:resultado}', async () => {",
	"\t$4",
	"})"
	],
	"description": "Define um Teste assíncrono escrito com BDD"
	}
	}

view raw Snippet Testes Jest hosted with ❤ by GitHub

O snippet de Vue é para uso com composition Api usando Typescript e Sass scoped, mas você pode adaptar como preferir:

	// No VS CODE ir em File -> Preferences -> Configure User Snippets -> Vue
	// Arquivo vue.json:
	{
	"Vue3-CompAPI TS+SASS (com import)": {
	"prefix": "v3-sass",
	"body": [
	"<script setup lang='ts'>",
	"\t$2",
	"</script>",
	"<template>",
	"\t$1",
	"</template>",
	"<style lang='scss' scoped>",
	"\t@import './$3${TM_FILENAME_BASE}.scss';",
	"</style>"
	],
	"description": "Estrutura Vue 3 Composition API, script setup com TS e SASS (incluindo import na raiz)"
	},
	"Vue3-CompAPI TS+SASS": {
	"prefix": "v3-old",
	"body": [
	"<template>",
	"\t$1",
	"</template>",
	"<script lang='ts'>",
	"import { defineComponent } from 'vue'",
	"\t",
	"export default defineComponent({",
	"\tprops: {",
	"\t\t$2",
	"\t},",
	"\tsetup(props){",
	"\t\t$3",
	"\t\treturn {",
	"\t\t};",
	"\t},",
	"})",
	"</script>",
	"<style lang='scss' scoped>",
	"\t$4",
	"</style>"
	],
	"description": "Estrutura Vue 3 composition api com Typescript e SASS Scoped"
	},
	"Vue3-CompAPI TS": {
	"prefix": "vue3-ts",
	"body": [
	"<script setup lang='ts'>",
	"\t$2",
	"</script>",
	"<template>",
	"\t$1",
	"</template>"
	],
	"description": "Estrutura Vue 3 composition api com TS"
	}
	}

view raw Snippet Vue3 + TS + SASS + Tailwind hosted with ❤ by GitHub

O artigo é para produtividade com Testes e Vue, mas também é possível criar snippets para outras linguagens.

Espero ter ajudado! 😊

Comments

[Pachi 🥑]

Ótimo artigo, achei bem didatico!

[Meriéli Manzano]

Obrigada @pachicodes! Fico muito feliz que tenha gostado 😊