After a few more edits to the Vue.JS frontend of the blog I decided it was time to learn how to add some tests in JavaScript. At first, I thought about cheating a little and using Python to carry out End to End (E2E) testing on just the site but I want to learn more JavaScript, so….time for Vitest!
If you want to take a look at the frontend code, it’s on my GitHub at: https://github.com/geektechdude/blog-vue-frontend
Tackling Vitest and package-lock.json and vitest.config.js options for the first time was a bit confusing for me. I wrote a test and was getting back an error message around “ReferenceError: document is not defined“. Finally after adding all the below Vitest kicked in and failed a test without an error. With a test failure I was encouraged to keep going.
Installing Vitest
npm install -D vitest @vue/test-utilsUpdate package.json
{
"name": "front_end",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test:unit": "vitest"
},Added vitest.config.js
import { defineConfig } from "vitest/config";
import vue from "@vitejs/plugin-vue"; // Import the plugin here
export default defineConfig({
test: {
environment: "jsdom",
globals: true,
},
plugins: [vue()], // Include it in your array of plugins here
});First Test!
So the first test is not anything too spectacular, it just checks that the About page has the wording that I expect it to have. However, it runs and it (currently) passes.
import { expect, describe, it } from 'vitest'
import AboutView from '../AboutView.vue'
import {mount} from "@vue/test-utils";
describe('AboutView.vue', () => {
describe('when mounted', () => {
it('renders properly', () => {
const wrapper = mount(AboutView, {});
expect(wrapper.html()).toContain('This is a test blog using Vue.JS for the frontend, Django for the backend and running queires via GraphQL');
});
});
});Time To Add GitHub Actions
With testing working, and a passing test I decided to implement another GitHub Action so that the tests automatically run when I push to the main branch. Again I ran into a few issues here around Node.JS and the dependency lock. I’ve placed the coding for this project in a directory called “front_end” so that I can separate it from the git file, Docker files and GitHub files but that means the expected Node.JS dependency lock is not in the root directory of the project. It also means that any npm commands need to be run in the front_end directory and not the root of the directory.
Dependencies lock file is not found in ...This was solved with a few options in the GitHub Actions file (vitest.yml), specifically the ‘working-directory’ option and the ‘cache-dependency-path’ option.
name: Node.js CI
on:
push:
branches: [ "main" ]
jobs:
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./front_end
strategy:
matrix:
node-version: [22.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
- run: npm ci
- run: npm run build --if-present
- run: npm run test:unit