Testing Vue apps

• Watch the Unit Testing Vue video
• Follow the getting started guide to install Vitest
• Install Vitest
• Install Vue test-utils
• Optionally install the Vitest VS Code plugin
• Generate a report on demand by specifing a Reporter. E.g. by adding a npm script such as "test:unit:report": "vitest run --reporter html --outputFile ./test-reports/test-results.html",
• Optionally set up CI in with Github actions

Your task

Analyse your application and figure out where it makes sense to tests. Write a set of unit and/or component tests on your application. It is a good idea to also make your test fail in the beginning to make sure your tests are testing what you think they are.

Resources

• Vue documentation on testing
• How to Write Good Unit Tests: 14 Tips
• Vitest
• Vitest VS Code plugin
• Short Unit Testing Vue video
• Longer Unit Testing Vue video
• Vue Test Utils Crash Course
• Vitest video
• Front-end testing is for everyone - article on CSS tricks
• Front-end testing pitfalls - Smashing Magazine
• Vitest with Github actions
• Vitest Expect Syntax
• Chai Assert Syntax