VSCode + Volar (and disable Vetur) + Playwright Test for VSCode.
npm inpm run devRun tests from your VS Code, or execute
npm run test-
npm init vue@latest was used to create a default project.
npm init vue@latest
-
Install Playwright Text w/ component testing as dev dependencies.
npm i --save-dev @playwright/test @playwright/experimental-ct-vue
-
tests.jsfile was added that registers all the components to be tested.import register from '@playwright/experimental-ct-vue/register' import Counter from './src/components/Counter.vue' import DocumentationIcon from './src/components/icons/IconDocumentation.vue' import HelloWorld from './src/components/HelloWorld.vue' import NamedSlots from './src/components/NamedSlots.vue' import TheWelcome from './src/components/TheWelcome.vue' import WelcomeItem from './src/components/WelcomeItem.vue' register({ Counter, DocumentationIcon, HelloWorld, NamedSlots, TheWelcome, WelcomeItem, })
-
tests.htmlfile was added that defines theming for the components and referencestests.js.<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>@import '/src/assets/base.css';</style> </head> <body> <div id="app"></div> <script type="module" src="/tests.js"></script> </body> </html>
-
playwright.config.tswas added that executesnpm run devbefore running tests if it is not already running.import { PlaywrightTestConfig, devices } from '@playwright/test'; const config: PlaywrightTestConfig = { testDir: 'src', forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, reporter: process.env.CI ? [ ['html', { open: 'never' }], ] : [ ['html', { open: 'on-failure' }] ], webServer: { url: 'http://localhost:3000/tests.html', command: 'npm run dev', reuseExistingServer: !process.env.CI, }, use: { baseURL: 'http://localhost:3000/tests.html', trace: 'on-first-retry', }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, ], }; export default config;
-
A bunch of
.spec.tsand.spec.tsxfiles were added tosrcthat demonstrate Vue3 component testing with and without the use of JSX syntax.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent