-
Notifications
You must be signed in to change notification settings - Fork 4.7k
feature: add docs for testing section #112
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
c144f57
7aae72d
eef60c6
e531421
8853b4f
ee06b16
3e90d67
d77fbda
12a0a0a
e17b5fe
cfc55e0
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,158 @@ | ||
# Testing | ||
|
||
## Introduction | ||
|
||
When it comes to building reliable applications, tests can play a critical role in an individual or team's ability to build new features, refactor code, fix bugs, etc. While there are many schools of thought with testing, there are three categories often discussed in the context of web applications: | ||
|
||
- Unit Testing | ||
- Component Testing | ||
- End-To-End (E2E) Testing | ||
|
||
This section aims to provide guidance to navigating the testing ecosystem and choosing the right tools for your Vue application or component library. | ||
|
||
## Unit Testing | ||
|
||
### Introduction | ||
|
||
Unit tests allows you to test individual units of a codebase in isolation. While there are many schools of thought with how this should be done, at its core, unit testing can provide developers with confidence that parts of an application are stable as new features are built, code is refactored, to prevent bugs from recurring, etc. | ||
|
||
### Choosing Your Framework | ||
|
||
Since unit testing advice is often framework-agnostic, here are some basic guidelines to keep in mind when evaluating which unit testing tool is best for your application. | ||
|
||
#### First-class error reporting | ||
|
||
When tests fail, it is critical that your unit testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, modern unit testing libraries also provides context for why a test fails, e.g., what is expected vs what was received. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### Active community and team | ||
|
||
Since the majority of unit testing frameworks are open-source, having a community that is active can be critical to some teams that will be maintaining their tests for a long period of time and needs to ensure that a project will be actively maintained. In addition, having an active community has the benefit of providing more support whenever you run into issues. | ||
|
||
### Frameworks | ||
|
||
While there are many tools in the ecosystem, here are some common unit testing tools that are being used in the Vue.js ecosystem. | ||
|
||
#### Jest | ||
|
||
Jest is a JavaScript test framework that is focused on simplicity. One of its unique features is the ability to take snapshots of tests in order to provide an alternative means of verifying units of your application. | ||
|
||
**Resources:** | ||
|
||
- [Official Jest Website](https://jestjs.io) | ||
- [Official Vue CLI Plugin - Jest](https://cli.vuejs.org/core-plugins/unit-jest.html) | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### Mocha | ||
|
||
Mocha is a JavaScript test framework that runs on Node.js and in the browser. It aims to provide functionality for testing both synchronous and asynchronous code with a simple interface. Unlike Jest, it usually pairs with other libraries for functionality such as spying (e.g., SinonJS) and test expectations (e.g., ChaiJS). | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
**Resources:** | ||
|
||
- [Official Mocha Website](https://mochajs.org) | ||
- [Official Vue CLI Plugin - Mocha](https://cli.vuejs.org/core-plugins/unit-mocha.html) | ||
|
||
## Component Testing | ||
|
||
### Introduction | ||
|
||
When testing Vue components, they need to be mounted to the DOM (either virtual or real) in order to fully assert that they are working. As a result, component testing frameworks were created to give users the ability to do this in a reliable way while also providing conveniences such as integrations for Vuex, Vue Router, and other Vue plugins. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Choosing Your Framework | ||
|
||
The following section provides guidelines on things to keep in mind when evaluating which component testing framework is best for your application. | ||
|
||
#### Optimal compatibility with the Vue ecosystem | ||
|
||
It should be no surprise that one of the first criteria is that a component testing library should have is being as compatible with the Vue ecosystem as possible. While this may seem comprehensive, some key integration areas to keep in mind include single file components (SFCs), Vuex, Vue Router and any other Vue specific plugins that your application relies on. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### First-class error reporting | ||
|
||
When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provides context for why a test fails, e.g., what is expected vs what was received. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Recommendations | ||
|
||
#### Vue Testing Library (@testing-library/vue) | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Vue Testing Library was created to promote writing testing that would interact with your components the way your users would while also keeping accessibility in mind. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
**Resources:** | ||
|
||
- [Official Vue Testing Library Website](https://testing-library.com/docs/vue-testing-library/intro) | ||
|
||
#### Vue Test Utils | ||
|
||
Vue Test Utils is the low-level component testing library that was written to provide users access to Vue specific APIs. While it is officially maintained, we recommend most users use Vue Testing Library, which is an abstraction over Vue Test Utils. | ||
|
||
**Resources** | ||
|
||
- [Official Vue Test Utils Documentation](https://vue-test-utils.vuejs.org) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should link to the docs for VTU next: https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html VTU v1 is only for Vue 2. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I assume that eventually we'll merge both docs (to let users search through v1 docs), so the URL would be the same one. |
||
- [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide) by Lachlan Miller | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## End-to-End (E2E) Testing | ||
|
||
### Introduction | ||
|
||
While unit tests provide developers with some degree of confidence, unit and component tests are limited in their abilities to provide holistic coverage of an application when deployed to production. As a result, end-to-end (E2E) tests provide coverage on what is arguably the most important aspect of an application: what happens when users actually use your applications. | ||
|
||
In other words, E2E tests validate all of the layers in your application. This not only includes your frontend code, but all associated backend services and infrastructure that are more representative of the environment that your users will be in. By testing how user actions impact your application, E2E tests are often the key to higher confidence in whether an application is functioning properly or not. | ||
|
||
### Choosing Your Framework | ||
|
||
While end-to-end (E2E) testing on the web has gained a negative reputation for unreliable (flaky) tests and slowing down development processes, modern E2E tools have made strides forward to create more reliable, interactive, and useful tests. When choosing an E2E testing framework, the following sections provide some guidance on things to keep in mind when choosing a testing framework for your application. | ||
|
||
#### Cross-browser testing | ||
|
||
One of the primary benefits that end-to-end (E2E) testing is known for is its ability to test your application across multiple browsers. While it may seem desirable to have 100% cross-browser coverage, it is important to note that cross browser testing has diminishing returns on a team's resources due the additional time and machine power required to run them consistently. As a result, it is important to be mindful of this trade-off when choosing the amount of cross-browser testing your application needs. | ||
|
||
::: tip | ||
A recent development in for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.). | ||
::: | ||
|
||
#### Faster feedback loops | ||
|
||
One of the primary problems with end-to-end (E2E) tests and development is that running the entire suite takes a long time. Typically, this is only done in continuous integration and deployment (CI/CD) pipelines. Modern E2E testing frameworks have helped to solve this by adding features like parallelization, which allows for CI/CD pipelines to often run magnitudes faster than before. In addition, when developing locally, the ability to selectively run a single test for the page you are working on while also providing hot reloading of of tests can help to boost a developer's workflow and productivity. | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### First class debugging experience | ||
|
||
While developers have traditionally relied on scanning logs in a terminal window to help determine what went wrong in a test, modern end-to-end (E2E) test frameworks allow developers to leverage tools that they are already familiar with, e.g. browser developer tools. | ||
|
||
#### Visibility in headless mode | ||
|
||
When end-to-end (E2E) tests are run in continuous integration / deployment pipelines, they are often run in headless browsers (i.e., no visible browser is opened for the user to watch). As a result, when errors occur, a critical feature that modern E2E testing frameworks provide 1st class support for is the ability to see snapshots and/or videos of your applications during various testing stages in order to provide insight into why errors are happening. Historically, it was tedious to maintain these integrations. | ||
|
||
### Recommendations | ||
|
||
While there are many tools in the ecosystem, here are some common end-to-end (E2E) testing frameworks that are being used in the Vue.js ecosystem. | ||
|
||
#### Cypress.io | ||
|
||
Cypress.io is a testing framework that aims to enhance developer productivity by enabling developers to reliably test their applications while providing a first class developer experience. | ||
|
||
**Resources** | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
- [Cypress' Official Website](https://www.cypress.io) | ||
- [Official Vue CLI Cypress Plugin](https://cli.vuejs.org/core-plugins/e2e-cypress.html) | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### Nightwatch.js | ||
|
||
Nightwatch.js is an end-to-end testing framework that can be used to test web applications and websites, as well as Node.js unit and integration testing. | ||
|
||
**Resources:** | ||
|
||
- [Nightwatch's Official Website](https://nightwatchjs.org\) | ||
bencodezen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- [Official Vue CLI Nightwatch Plugin](https://cli.vuejs.org/core-plugins/e2e-nightwatch.html) | ||
|
||
#### Puppeteer | ||
|
||
Puppeteer is a Node library that provides a high-level API to control the browser and can pair with other test runners (e.g., Jest) to test your application. | ||
|
||
**Resources:** | ||
|
||
- [Puppeteer's Official Website](https://pptr.dev) | ||
|
||
#### TestCafe | ||
|
||
TestCafe is a Node.js based end-to-end framework that aims to provide easy setup so that developers can focus on creating tests that are easy to write and reliable. | ||
|
||
**Resources:** | ||
|
||
- [TestCafe's Official Website](https://devexpress.github.io/testcafe/) |
Uh oh!
There was an error while loading. Please reload this page.