Testing Meteor and Vue

testing
1

Before starting to use Vue (using the Akryum:vue-component code et al), I’ve been very happy with the techniques described by the Meteor testing guide and in particular by Pete Corey at the two urls below:


These techniques produced fast unit tests for both client and server code.

However now I’ve switched to Vue I’m getting this message:
SyntaxError: /pathto/imports/ui/AppLayout.vue: Unexpected token (1:0)
<template>

This is caused by a .vue component, which contains both “template” and “script” tags, both of which my current testing efforts do not like.

I’ve spend three days reading all over the place to try and solve the problem, but it seems that the only possible solutions involve either webpack or browserify.

My question is: is there a way of dealing with the problem without resorting to Webpack?

One of the reasons I like Meteor (there are several reasons) is because - as Sashko says “You don’t need a degree in Webpack”, and I really do not want to start using it, if it can be avoided.
However presumably the .vue component needs compiling before it can be tested.

In reality I am not interested at this stage in testing anything in the template tag. All I would like to do for the moment is get at the exported code in the script tag. Is that possible without webpack?

1 Like
2

I suppose actually that the answer, which has been staring me in the face all along, is to write the logic I want to test in a separate .js file and import it into the .vue component.

That should keep me going for a while without having to resort to webpack.

3 Likes
3

A couple solutions I can think of:

  • read the .vue file contents, use a regex to extract the content between the <script></script> tags, then you can evaluate it
  • do something like this
  • use the webpack vue-loader in your tests so that you can import a .vue file in tests and it will convert it to a Vue instance
1 Like
4

@efrancis How I use the webpack vue-loader in my tests?

Meteor already has Webpack right? And meteor-vue has vue-loader.
I think that is simple to add one to each other, like in: testing-single-file-components-with-mocha-webpack

Someone can help?

5

No, Meteor does not have Webpack.
That’s considered one of the big advantages of Meteor’s build system, since Webpack is complicated to use.

1 Like
6

You can use jest and jest-vue-preprocessor and manually mock out all Meteor packages, that’s what I do.

in your jest-config.js you can tell Jest to transform .vue files w/jest-vue-preprocssor, and also to look in a specific folder for Meteor package mocks

   'transform': {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'jest-vue-preprocessor'
  },
  'moduleNameMapper': {
    '^meteor/(.*)': '<rootDir>/tests/unit-test-setup/meteor-mocks/$1.js',
  },

so an import in your code like

import { Meteor } from 'meteor/meteor';

will import your mock from the following file when used in unit tests:

<project root>/tests/unit-test-setup/meteor-mocks/meteor.js

2 Likes
7

Thanks @efrancis for post your solution!

I try later.

Mock all meteor packages will be a hard work…

8

It appears that the fundamental problem of testing Vue components has not yet been resolve, or has it? Does anyone have a solution if they want to use something besides Jest?

9

The vue-test-utils page is pretty good actually.

I think that you will find that everything you need is there to set up tests on vue components.

10

Thanks for replying! I’ve been trying to following this TDD tutorial (https://learntdd.in/vue/) using Meteor, Vue and Cypress but have been running into problems, described here: Error message doing TDD using Cypress and meteor

If you have any tips, I’d appreciate it.

11

For anyone else still trying to figure this out: [Tutorial + Demo App] Testing Meteor Vue apps with Cypress
Included unit testing info. Although, it’s specific to cypress, there is info on there about installing webpack as a dev-dependency to get past the error.