Vue - Testing

In this article, testing best practices will be explained.

Types of tests

Static Tests

Static testing is the process of verifying that your code meets certain expectations without actually running it. Unlike unit and integration testing, static testing can be performed on raw source code without the need for a web server or build process.

Static testing is most commonly used to:

• Ensure consistent style and formatting
• Check for common mistakes and possible bugs
• Limit the complexity of code
• Verify type consistency
• Minimize security risks
• Keep third-party dependencies up to date

These are the tools to do the static testing:

• ESLint - Most widely used static testing tool for JavaScript that has a use case as a linter that catches inconsistent formatting, styling, and possible errors.
• Prettier - Not a fully featured linter, since it only addresses style and formatting rules. It helps by limiting choices and automatically fixing code that does not conform to its style guide.
• SonarCloud - Provides a comprehensive suite of static analysis tools to assess your codebase's quality across a wide range of measures.
• npm-audit - Ensure that your third party dependencies are up to date and secure.
• TypeScript - Provides type annotations and type checking.

Eslint Vue
In particular there is a plugin for ESLint that will help your Vue.js development. This plugin provides some predefined configs, such as:

• base - Settings and rules to enable correct ESLint parsing
• essential - base, plus rules to prevent errors or unintended behavior in the app
• strongly-recommended - essential, plus rules to considerably improve code readability and/or dev experience
• recommended - strongly-recommended, plus rules to enforce subjective community defaults to ensure consistency You can use the configs by adding them to the extends in the .eslintrc file. Read this usage guide for more information.

Unit Tests

Unit testing, as the naming already reveals is a type of testing where units of an application are being tested in isolation. You should write unit tests for shared components and functions that are used throughout the entire application as they might be used in different scenarios which might be difficult to reproduce in integration tests. Unit Test Example Code

Integration Tests

Integration testing is a method of testing multiple parts of an application at once. Most of your tests should be integration tests, as these will give you the most benefits and confidence for your invested effort. Unit tests on their own don't guarantee that your app will work even if those tests pass, because the relationship between the units might be wrong. You should test different features with integration tests.

Integration Test Example Code

E2E

End-To-End Testing is a testing method where an application is tested as a complete entity. Usually these tests consist of running the entire application with the frontend and the backend in an automated way and verifying that the entire system works. It is usually written in the way the application should be used by the user.

E2E Example Code

Tooling

Jest

Jest is a fully featured testing framework and is de-facto standard when it comes to testing JavaScript applications. It is very flexible and configurable to test both frontends and backends.

These are some guides for unit testing a Vue.js app using Jest:

• Testing real world VueJs apps
• Unit Testing Vue-Router
• How to Use Mock Data in Vue Apps
• Testing Vuex Actions Correctly with Jest
• Mocking Vue.js global objects in vue-test-utils
• Comprehensive tutorial of Vue.js app with TDD methodology: Working an application in Vue.js with TDD

Testing Library

Testing library is a set of libraries and tools that makes testing easier than ever before. Its philosophy is to test your app in a way it is being used by a real world user instead of testing implementation details. For example, don't test what is the current state value in a component, but test what that component renders on the screen for its user. If you refactor your app to use a different state management solution, the tests will still be relevant as the actual component output to the user didn't change.

Cypress

Cypress is a tool for running e2e tests in an automated way. You define all the commands a real world user would execute when using the app and then start the test. It can be started in 2 modes:

Browser mode - it will open a dedicated browser and run your application from start to finish. You get a nice set of tools to visualize and inspect your application on each step. Since this is a more expensive option, you want to run it only locally when developing the application. Headless mode - it will start a headless browser and run your application. Very useful for integrating with CI/CD to run it on every deploy. It is very configurable with plugins and commands. You can even pair it with Testing Library which is makes your tests even easier to write.

You can also write custom commands to abstract some common tasks.

Custom Cypress Commands Example Code

MSW

For prototyping the API use msw, which is a great tool for quickly creating frontends without worrying about servers. It is not an actual backend, but a mocked server inside a service worker that intercepts all HTTP requests and returns desired responses based on the handlers you define. This is especially useful if you only have access to the frontend and are blocked by some not implemented features on the backend. This way, you will not be forced to wait for the feature to be completed or hardcode response data in the code, but use actual HTTP calls to build frontend features.

It can be used for designing API endpoints. The business logic of the mocked API can be created in its handlers.

API Handlers Example Code

Data Models Example Code

Having fully functional mocked API server also handy when it comes to testing, you don't have to mock fetch, but make requests to the mocked server instead with the data your application would expect.