[SOLVED] Testing .vue files without webpack

VueJS
1

Has anyone successfully built tests for Vue components with vue/meteor?
(without using webpack of course).

I’ve been trying with mocha which is failing because it doesn’t know what to do with the template tags.

mocha ./tests --compilers js:babel-register "-w"

SyntaxError: /Users/malcolm/git/geoloc-for-walks/imports/client/ui/AppLayout.vue: Unexpected token (1:0)
<template>
^

Under normal vue testing the .vue files are run through webpack first, but Meteor for simplicity does not use webpack.

I have searched the web for a couple of days, but I’m getting nowhere, webpack gets its oar in wherever I find vue testing articles.

2

yes I’m using Jest and Avoriaz to test Vue in Meteor, it works very well. I’ll be publicly announcing a Meteor+Vue enterprise starter kit that I’ve been building sometime soon, but you’re free to take a look if you want some help

this is my jest config. notice the jest-vue-preprocessor and babel-jest (I’m only showing the important parts of the config),

module.exports = {
   ...
  'moduleFileExtensions': [
    'js',
    'vue'
  ],
  'transform': {
    '^.+\\.js$': 'babel-jest',                       // this will use anything in your .babelrc in tests
    '.*\\.(vue)$': 'jest-vue-preprocessor'          // this will handle compiling .vue files
  },
  'moduleNameMapper': {
    '^meteor/(.*)': '<rootDir>/tests/unit-test-setup/meteor-mocks/$1.js',         // this will mock any imports from 'meteor/xyz'
    '^[/](.*)': '<rootDir>/$1'
  }
   ...
};

Then in the tests/unit-test-setup/meteor-mocks/ directory I have one file for each Meteor package name (meteor/<package name>) so that Jest has something to import when it sees imports from meteor/<name>. You can see that here https://github.com/ejfrancis/Meteor-Vue-Modular-App-Starter/tree/master/tests/unit-test-setup/meteor-mocks

Then in my unit tests, if I want to mock those Meteor imports I can do something like this

import { checkUserGlobalRole } from './check-user-global-role';
import * as MeteorModule from 'meteor/meteor';
import * as RolesModule from 'meteor/alanning:roles';

describe('check-user-global-role', () => {
  it('returns false if user not signed in', () => {
    // mock the `Roles.userIsInRole` method from the `meteor/alanning:roles` package
    RolesModule.Roles.userIsInRole = jest.fn();
    // override `Meteor.isServer` from `meteor/meteor` 
    MeteorModule.Meteor.isServer = true;
    // set Meteor.userId() to null to simulate user signed out
    MeteorModule.Meteor.userId = () => null;
    const res = checkUserGlobalRole.call({ roles: [] });
    expect(res).toEqual(false);
    // assert that the mock wasnt called
    expect(RolesModule.Roles.userIsInRole).toHaveBeenCalledTimes(0);
  });
});
1 Like
3

l didn’t know about Avoriaz or Jest, I reckon for testing that’s what I was looking for.

The rest is a very impressive piece of work.
Thankyou for showing it to me.

But as you say

Note: This starter kit is geared towards enterprise software. If you’re looking to put together a quick prototype, this may be overkill.

However I shall be coming back to it: it’s a very well-structured app indeed.

4

Just wanted to say thanks again.
I’ve got a first test working with Jest and Avoriaz thanks to your help.

Especially useful was the setup for meteor mocks in the unit-test-setup folder, which solves a difficult problem.

5

glad I could help :slight_smile: I think anyone using Meteor’s built in unit testing should give Jest a shot, Meteor’s default testing is so slow and cumbersome. I find that using Jest for unit tests, and Chimp for end-to-end tests, is a really great experience for testing Meteor apps