dependabot[bot] 51134a5541
chore(deps-dev): bump vite from 2.9.5 to 2.9.13 in /examples/components-vue (#16936)
chore(deps-dev): bump vite in /examples/components-vue

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 2.9.5 to 2.9.13.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v2.9.13/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2022-08-31 10:28:39 +02:00
..

Component testing with Playwright and Vue3

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar) + Playwright Test for VSCode.

Project Setup

npm i

Compile and Hot-Reload for Development

npm run dev

Test project

Run tests from your VS Code, or execute

npm run test

How to add component tests using Playwright

  • npm init vue@latest was used to create a default project.

    npm init vue@latest
    
  • Install Playwright Test with component testing as dev dependencies.

    npm i --save-dev @playwright/test @playwright/experimental-ct-vue
    
  • playwright/index.html file was added that defines theming for the components through importing playwright/index.js.

  • playwright.config.ts was added that builds components before running tests.

  • A bunch of .spec.ts and .spec.tsx files were added to src that demonstrate Vue3 component testing with and without the use of JSX syntax.