This is a template repo that gets you set up with https://vitest.dev for unit tests and https://playwright.dev for integration tests.
It is recommended to write the unit tests while looking at the test output, so you can get a nice red-green-refactor flow going.
However, the integration tests are best to record instead of write. That way you can re-record the steps when it breaks, making sure everything works as expected. You do not need to spend time debugging flaky integration tests - re-record it instead!
npm i
npx playwright install (you may not need all of these browsers)
npm test
npm start
Note: Restart these scripts when you add a new file.
- Close
npm run build:unit-watchandnpm run test:unitif they are running. - Create a new Imba file in
app/tests/vitest/that ends with.spec.imba. - To continually rebuild, run
npm run build:unit-watch. - To continually re-run tests, run
npm run test:unit.
Optionally, you can use the vscode snippets /describe, /tfull and /tsimple to quickly scaffold the test structure.
Note: Don't write integration tests yourself - record them instead!
- Start Imba with
npm start. - Open the auto recording Playwright tool with
npm run test:e2e-codegen. - Go through the steps you want to have an integration test for - for example clicking a link, typing into a search field, selecting a result, etc.
- When you're done, stop the recording.
- In the upper right corner, make sure the default setting is active in the drop down:
Target: Playwright Test. - Click the copy button next to the record button in the upper left corner, so you copy the entire recorded test.
- Create a new file ending in
.spec.tsinapp/tests/playwright/and paste in the recorded steps. - Replace the reference to
page.goto('http://localhost:3000')) withpage.goto('/')instead. The setting for what is the "default root path" is configured inplaywright.config.ts. - Run your test with
npm run test:e2e. - Done!