G'day
OKOK, another article in that bloody series I've been doing. Same caveats as usual: go have a breeze through the earlier articles if you feel so inclined. That said this is reasonably stand-alone.
- Intro / Nginx
- PHP
- PHPUnit
- Tweaks I made to my Bash environment in my Docker containers
- MariaDB
- Installing Symfony
- Using Symfony
- Testing a simple web page built with Vue.js using Mocha, Chai and Puppeteer
- I mess up how I configure my Docker containers
- An article about moving files and changing configuration
- Setting up a Vue.js project and integrating some existing code into it
- Unit testing Vue.js components (this article)
This is really very frustrating. You might recall I ended my previous article with this:
Now I just need to work out how to implement a test of just the GreetingMessage.vue component discretely, as opposed to the way I'm doing it now: curling a page it's within and checking the page's content. […]
Excuse me whilst I do some reading.
…
[Adam runs npm install of many combinations of NPM libs]
…
[Adam downgrades his version of Vue.js and does the npm install crap some more]
…
OK screw that. Seems to me - on initial examination - that getting all the libs together to make stand-alone components testable is going to take me longer to work out than I have patience for. I'll do it later. […] Sigh.
I have returned to this situation, and have got everything working fine. Along the way I had an issue with webpack that I eventually worked around, but once I circled back to replicate the work and write this article, I could no longer replicate the issue. Even rolling back to the previous version of the application code and step-by-step repeating the steps to get to where the problem was. This is very frustrating. However other people have had similar issues in the past so I'm going to include the steps to solve the problem here, even if I have to fake the issue to get error messages, etc.
Right so I'm back with the Vue.js docs regarding testing: "Vue.JS > Testing > Component Testing". The docs are incredibly content-lite, and pretty much just fob you off onto other people to work out what to do. Not that cool, and kinda suggests Vue.js considers the notion of unit testing pretty superficially. I did glean I needed to install a coupla Node modules.
First, @testing-library/vue, for which I ran into a glitch immediately:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: full-stack-exercise@2.13.0
npm ERR! Found: vue@3.0.5
npm ERR! node_modules/vue
npm ERR! vue@"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.10" from @testing-library/vue@5.6.1
npm ERR! node_modules/@testing-library/vue
npm ERR! dev @testing-library/vue@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /var/cache/npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /var/cache/npm/_logs/2021-02-19T11_29_15_901Z-debug.log
root@00e2ea0a3109:/usr/share/fullstackExercise#
The current version of @testing-library/vue doesn't work with the current version of Vue.js. Neato. Nice one Vue team. After some googling of "wtf?", I landed on an issue someone else had raised already: "Support for Vue 3 #176": I need to use the next branch (npm install --save-dev @testing-library/vue@next). This worked OK.
The other module I needed was @vue/cli-plugin-unit-mocha. That installed with no problem. This all gives me the ability to run vue-cli-service test:unit, which will run call up Mocha and run some tests. The guidance is to set this up in package.json, thus:
"scripts": {
"test": "mocha test/**/*Test.js",
"serve": "vue-cli-service serve --watch",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit test/unit/**/*.spec.js"
},
Then one can jus run it as npm run test:unit.
I looked at the docs for how to test a component ("Unit Testing Vue Components" - for Vue v2, but there's no equivalent page in the v3 docs), and knocked together an initial first test which would just load the component and do nothing else: just to check everything was running (frontend/test/unit/GreetingMessage.spec.js (final version) on Github):
import GreetingMessage from "../../src/gdayWorld/components/GreetingMessage";
import { shallowMount } from "@vue/test-utils";
import {expect} from "chai";
describe("Tests of GreetingMessage component", () => {
it("should successfully load the component", () => {
let greetingMessage = shallowMount(GreetingMessage, {propsData: {message: "G'day world"}});
expect(true).to.be.true;
});
});
Here's where I got to the problem I now can't replicate. When I ran this, I got something like:
> full-stack-exercise@2.13.0 test:unit
> vue-cli-service test:unit test/unit/**/*.spec.js
WEBPACK Compiling...
[=========================] 98% (after emitting)
ERROR Failed to compile with 1 error
error in ./node_modules/mocha/lib/cli/cli.js
Module parse failed: Unexpected character '#' (1:0)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
> #!/usr/bin/env node
| 'use strict';
|
[…etc…]
There's a JS file that has a shell-script shebang thing at the start of it, and the Babel transpiler doesn't like that. Fair enough, but I really don't understand why it's trying to transpile stuff in the node_modules directory, but at this point in time, I just thought "Hey-ho, it knows what it's doing so I'll take its word for it".
Googling about I found a bunch of other people having a similar issue with Webpack compilation, and the solution seemed to be to use a shebang-loader in the compilation process (see "How to keep my shebang in place using webpack?", "How to Configure Webpack with Shebang Loader to Ignore Hashbang…", "Webpack report an error about Unexpected character '#'"). All the guidance for this solution was oriented aroud sticking stuff in the webpack.config.js file, but of course Vue.js hides that away from you, and you need to do things in a special Vue.js way, but adding stuff with a special syntax to the vue.config.js file. The docs for this are at "Vue.js > Working with Webpack". The docs there showed how to do it using chainWebpack, but I never actually got this approach to actually solve the problem, so I mention this only because it's "something I tried".
From there I starting thinking, "no, seriously why is it trying to transpile stuff in the node_modules directory?" This does not seem right. I changed my googling tactic to try to find out what was going on there, and came across "Webpack not excluding node_modules", and that let me to update my vue.config.js file to actively exclude node_modules (copied from that answer):
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
...
};
And that worked. Now when I ran the test I have made progress:
> full-stack-exercise@2.13.0 test:unit
> vue-cli-service test:unit test/unit/**/*.spec.js
WEBPACK Compiling...
[=========================] 98% (after emitting)
DONE Compiled successfully in 1161ms
[=========================] 100% (completed)
WEBPACK Compiled successfully in 1161ms
MOCHA Testing...
Tests of GreetingMessage component
✓ should successfully load the component
1 passing (17ms)
MOCHA Tests completed successfully
root@eba0490b453d:/usr/share/fullstackExercise#
From there I rounded out the tests properly (frontend/test/unit/GreetingMessage.spec.js):
import GreetingMessage from "../../src/gdayWorld/components/GreetingMessage";
import { shallowMount } from "@vue/test-utils";
import {expect} from "chai";
describe("Tests of GreetingMessage component", () => {
let greetingMessage;
let expectedText = "TEST_MESSAGE";
before("Load test GreetingMessage component", () => {
greetingMessage = shallowMount(GreetingMessage, {propsData: {message: expectedText}});
});
it("should return the correct heading", () => {
let heading = greetingMessage.find("h1");
expect(heading.exists()).to.be.true;
let headingText = heading.text();
expect(headingText).to.equal(expectedText);
});
it("should return the correct content", () => {
let contentParagraph = greetingMessage.find("h1+p");
expect(contentParagraph.exists()).to.be.true;
let contentParagraphText = contentParagraph.text();
expect(contentParagraphText).to.equal(expectedText);
});
});
Oh! Just a reminder of what the component is (frontend/src/gdayWorld/components/GreetingMessage.vue)! Very simple stuff, as the tests indicate:
<template>
<h1>{{ message }}</h1>
<p>{{ message }}</p>
</template>
<script>
export default {
name: 'GreetingMessage',
props : {
message : {
type: String,
required: true
}
}
}
</script>
One thing I found was that every time I touched the test file, I was getting this compilation error:
> vue-cli-service test:unit test/unit/**/*.spec.js
WEBPACK Compiling...
[=========================] 98% (after emitting)
ERROR Failed to compile with 1 error
error in ./test/unit/GreetingMessage.spec.js
Module Error (from ./node_modules/eslint-loader/index.js):
/usr/share/fullstackExercise/test/unit/GreetingMessage.spec.js
7:1 error 'describe' is not defined no-undef
12:5 error 'before' is not defined no-undef
16:5 error 'it' is not defined no-undef
24:5 error 'it' is not defined no-undef
✖ error4 problems (4 errors, 0 warnings)
But if I ran it again, the problem went away. Somehow ESLint was getting confused by things; it only lints things when they've changed, and on the second - and subsequent - runs it doesn't run so the problem doesn't occur. More googling, and I found this: "JavaScript Standard Style does not recognize Mocha". The guidance here is to let the linter know I'm running Mocha, with the inference that there will be some global functions it can just assume are legit. This is just an entry in package.json:
"eslintConfig": {
"root": true,
"env": {
"node": true,
"mocha": true
},
// etc
Having done that, everything works perfectly, and despite the fact that is a very very simple unit test… I'm quite pleased with myself that I got it running OK.
After sorting it all out, I reverted everything in source control back to how it was before I started the exercise, so as to replicate it and write it up here. This is when I was completely unable to reproduce that shebang issue at all. I cannot - for the life of me - work out why not. Weird. Anyway, I decided to not waste too much time trying to reproduce a bug I had solved, and just decided to mention it here as a possible "thing" that could happen, but otherwise move on with my life.
I have now got to where I wanted to get at the beginning of this series of articles, so I am gonna stop now. My next task with Vue.js testing is to work out how to mock things, because my next task will require me to make remote calls and/or hit a DB. And I don't want to be doing that when I'm running tests. But that was never an aim of this article series, so I'll revert to stand-alone articles now.
Righto.
--
Adam
