Testing ​

Automated tests are very important which help you and your team build complex applications quickly and confidently by preventing regressions and encouraging you to break apart your application into testable functions, modules, classes, and components.

Before reading this guide, I highly recommend you to finish the following awesome artciles about testing:

• Vue3 Official Docs: Testing
• @vue/test-utils: Knowing What to test
• "Component Tests with Vue.js" by Matt O'Connell
• testing-library Docs
• End-to-End or Component Tests

Unit/Component Testing ​

We recommend to write "Blackbox tests" for component with Testing Library, in which the implementation details of a component should not be cared. The guiding principle of Testing Library is that the more tests resemble the way software is used, the more confidence they can provide.

Vitify Admin comes with three built-in testing utils in test/helpers.ts. The most frequently used method is renderWithVuetify which is used to mount component containing Vuetify components with Testing Library, while createWrapper mounts component with @vue/test-utils. Use createWrapper only if you are building advanced components that require testing Vue-specific internals. mountComposable funtion is used to test composables.

login.spec.ts and message.spec.ts are two examples of how to write component testing and store testing.

E2E Testing ​

In Vitify Admin, we use Cypress which provides the most complete E2E solution with features like an informative graphical interface, excellent debuggability, built-in assertions and stubs, flake-resistance, parallelization, and snapshots.

Notice that Cypress also provides support for Component Testing. For components which you want to test style, or with native DOM events, cookies and localStorage, Cypress component testing which run in real browsers is a better choice than Vitest + Testing Library.

Cypress Download Speed ​

Downloading Cypress binary can be extremely slow, which is a long-lived issue bothers users all around the world #7251 #17652 #19612 #20032.

Since v10.6.0, Cypress enhanced the CYPRESS_DOWNLOAD_PATH_TEMPLATE environment variable interpolation to accept and replace ${version} to allow version-specific download paths to be honored. Therefore, for developers in China, we can set environment variables to download the binary from npmmirror instead of the orginal snail-slow Cloudflare. Add the following environment variable to your system:

CYPRESS_DOWNLOAD_PATH_TEMPLATE='https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip'

CYPRESS_DOWNLOAD_PATH_TEMPLATE='https://cdn.npmmirror.com/binaries/cypress/${version}/${platform}-${arch}/cypress.zip'

`PLAYWRIGHT_DOWNLOAD_HOST='https://cdn.npmmirror.com/binaries/playwright'`

`PLAYWRIGHT_DOWNLOAD_HOST='https://cdn.npmmirror.com/binaries/playwright'`