Chapter 2. Creating your first test
This chapter covers
- Writing npm scripts
- Catching formatting errors with ESLint
- Writing unit tests with Jest
- Writing unit tests for Vue components with Vue Test Utils
- Debugging Jest tests with the Chrome Debugger
A journey of a thousand miles begins with a single step, and every great test suite begins with a single test. This chapter is about writing that first test. By the end of the chapter you will have a test script that checks the project for formatting errors and runs a unit test against a Vue component.
To follow along with this chapter you need to install the correct programs and set up your environment. You can find the installation and setup instructions in appendix A. Follow the instructions to install the project and check out the chapter-2 branch, then return to this chapter.
The first part of this chapter is about the project structure. You’ll learn how to use npm to manage dependencies and run scripts, and then set up Jest to run a simple unit test.
After Jest is set up, you’ll write your first unit test for a Vue component. To do that, you’ll learn how to compile components with Jest and use the official Vue test library—Vue Test Utils.
The last section of this chapter is about debugging. Specifically, I’ll show you how to debug test code running in Jest using the Node Debugger and Chrome Developer tools. By the end of this chapter, you will be up to speed on the test setup and ready to test Vue component output in chapter 3.