Testing is a critical part of building reliable Vue applications. This post covers how to set up and write tests for Vue components using Vitest as the test runner and Vue Test Utils for component mounting, testing props and emitted events, simulating user interactions, and strategies for integration and end-to-end testing with Cypress or Playwright.
What is Testing?
- Testing is the process of checking that an application is functioning as expected. (For example, if a user clicks the login button, the authentication component should open on the page. The interactions users have with our application will change its behavior. Testing will help us verify that the correct behavior always occurs.)
- There are two types of Testing:
- Manual
- Automated
Manual Testing
After writing some code, we proceeded to test if it worked in the browser. Sometimes we even checked other parts of the app to make sure they worked. We would never write code and then claim it worked. We always tested new features in our app manually.
Manual testing is perfect for small applications. If it takes less than three minutes to test, you don't need to write tests. However, as your app scales, you may find the process cumbersome. Manual testing isn't deficient.
Manual testing can lead to bugs bleeding through because manual testing is boring. Boring & repetitive tasks can make us lose focus. The perfect storm for bugs to appear in production despite testing.
Automated Testing
Automated testing is when a program takes care of testing your application for you. Similar to how you would do it. It'll go through a list of tasks to execute. You can test functions, components, events and even screenshots. If all tests pass, you can go ahead with pushing the app into production. Otherwise, it won't tell you where things went wrong, thus saving you the time of having to you where the bug is present.
The best part is that machines can perform tests much faster than humans can. We can generally categorize tests into three groups:
- Unit Tests
- Snapshot Tests
- End-to-End (E2E)
End to End Testing (E2E)
End-to-end tests is used to check if the flow of the application is behaving as expected from start to finish. The purpose is to make sure things look like they're working from the user's perspective.
Example:
- Checking if the calculator is working:
- Open the browser
- Load the URL
- Press the 1 button
- Press the Plus button
- Press the 1 button
- Press the Equal button
- Select the element that holds the result.
- Compare its value to 2.
- End
Problems with E2E Testing
- They're slow. Tests can take up to an hour depending on the test.
- Difficult to debug since you may not know the exact reason a test fails
- Some tests fail because a service/API you're using is down. Meaning there really isn't an error to begin with.
Unit Testing
Instead of testing an entire page in the browser, you can run tests against small sections in your application. Unit test are reliable because they're fast and can tell you where a problem is. Unit test can be defined for functions and components.
Example:
- Testing the calculator's sum function
- Pass in 2 values
- Check the return value
- Throw an error if calculations is incorrect
- End Test
Unit Test Advantages
- Fast
- Help developers better understand the purpose of a function.
Unit Test Disadvantages
- Makes it difficult to refactor your code.
- You can only test individual sections of your code. Unable to test if multiple sections can work together.
Snapshot Testing
- Makes it difficult to refactor your code.
- You can only test individual sections of your code. Unable to test if multiple sections can work together.
Snapshot testing Disadvantages
- Different browsers/OS can throw errors even if the application in the snapshots are identical.
Frequently Asked Questions
What tools are used for testing Vue applications?
The recommended testing stack for Vue 3 includes Vitest as the unit test runner (fast, Vite-native), Vue Test Utils for mounting and interacting with components in tests, and Cypress or Playwright for end-to-end browser testing.
What is the difference between unit testing and end-to-end testing in Vue?
Unit tests test individual components or functions in isolation using mock data to verify they work correctly; end-to-end tests run the full application in a real browser to verify complete user workflows work from start to finish.