Chapter 3. Testing rendered component output
If a tree falls in a forest and no one is around to hear it, does it make a sound? More importantly, if a component is mounted and no one writes a test for it, did it generate output?
Testing is about input and output. In a test you supply an input, receive an output, and assert that the output is correct. The most common output of components is the rendered output—the stuff that render functions generate. That’s what this chapter is about: testing rendered component output.
To learn how to test component output, you’ll write a static Hacker News feed. The news feed is simple, but it gives you the opportunity to test different forms of output and get acquainted with the Vue Test Utils API.
This book is about testing from start to finish, and part of the testing process is converting murky requirements into specifications. The first section of this chapter is about creating specifications from requirements.
After you have the specifications for the static news feed, you’ll write tests for the specs. By doing that, you’ll learn how to use different Vue Test Utils methods to test the rendered output of Vue components in unit tests. After you’ve written the news feed, you’ll create a progress bar component, a task through which you’ll learn how to test styles and classes.
The first thing to do is create the specifications for the static news feed.