Testando componentes simples do Vue em javascript sem Vue CLI

Question

É possível testar os componentes do Vue que foram desenvolvidos em javascript simples sem uma configuração Vue CLI / Webpack / Babel?

A documentação sobre o assunto que encontrei até agora na Web é bem pequena:

• https://github.com/vuejs/vue-test-utils/issues/1192
• https://vue-test-utils.vuejs.org/installation/#running-vue-test-utils-without-a-build-step
• Como testar componentes simples do Vue (não componentes de arquivo único)

Instalei Vue, utils de teste Vue, JSDOM

Meu package.json:

{
  "name": "GuichetUnique.CMS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "jest": "^26.4.2",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.5",
    "jsdom": "16.4.0",
    "jsdom-global": "3.0.2"
  },
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Jest está funcionando bem com funções js simples, mas não consegui testar um componente Vue.

O conteúdo do meu teste

require('jsdom-global')();
var testUtils = require('@vue/test-utils'), Vue = require('vue');

testUtils.mount({ template: '<div>test</div>' });

O resultado do teste

TypeError: Illegal invocation at removeEventListener (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:15)

Por favor ajude !

Answer 1

Tivemos um problema semelhante há 2 meses. Um caso de uso ligeiramente diferente, mas para nós a dependência do VueCLI em específico foi o culpado. Sem ele, não encontramos nenhuma maneira de executar com êxito nem mesmo os testes básicos.

Acho que, se você quiser seguir esse caminho, terá que trabalhar muito para contornar os mecanismos pretendidos. Para isso, você precisa responder a si mesmo se vale a pena seu tempo. Fomos com o VueCLI e consideramos o overhead como garantido.

Answer 2

Eu tentei isso há um ano, onde me deparei com uma situação semelhante em que não quero usar CLI / webpack.

Espero que possa adicionar alguma contribuição na resolução de sua dúvida.

Para testar seu componente sem webpack, você pode usar o plugin http-vue-loader .

O fluxo de trabalho do plugin é simples

1. http solicitar o arquivo vue
2. carregar o arquivo vue em um fragmento de documento
3. processar cada seção (modelo, script e estilo)
4. retornar uma promessa para Vue.js (componentes assíncronos)
5. então Vue.js compila e armazena em cache o componente

Na verdade, o principal objetivo do plugin é testar rapidamente os vuecomponentes sem qualquer etapa de compilação. No entanto, para produção, eu recomendo usar o empacotador do módulo webpack com o vue-loader.

Consulte um exemplo aqui