Error message doing TDD using Cypress and meteor

I’m doing the tutorial found at: https://learntdd.in/vue/ with some modifications and I’m getting an error message (when doing the “inside”/unit test)

C:\Users\Kamal\Meteor\TestApp\imports\ui\ListTitle.vue:1
<template>
^
ParseError: Unexpected token

Here is my test code.

import { expect } from "chai";
import { mount } from "@vue/test-utils";
import List from "../../../../../imports/ui/ListTitle.vue";

describe("List Title", () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(List);
  });
});

If I leave out the “.vue” from my import, I get

“Error: Cannot find module ‘…/…/…/…/…/imports/ui/ListTitle’ from ‘C:\Users\Kamal\Meteor\TestApp\tests\cypress\integration\imports\ui’”

The first part of the e2e test runs just fine.

Any help is much appreciated.

From the error it look like you are missing vue-template-compiler

Try
meteor npm install vue-template-compiler --save-dev

and see if that works

1 Like

Well, I finally managed to figure it all out. I posted it separately here: [Tutorial + Demo App] Testing Meteor Vue apps with Cypress

Glad it’s solved.

Though personally I’ll continue steering clear of Webpack. Not having to use Webpack is one of the big advantages of Meteor.

Webpack is only needed for testing so one can install it just as a dev dependency. It doesn’t need to be part of the production code.