Vue with TDD
https://udemy.com/course/vue-with-test-driven-development/
starting a project
# in this example source is the name of the app
npm create vue@latest source
# typescript no
# jsx no
# SPA yes
# pinia yes
# vitest yes
# e2e no
# eslint yes
# prettier yes
cd source
code .
# install recommended extensions
npm install
npm run dev
files to take a look:
vite.config.js
vitest.config.js
(note: referencesvite.config.js
)index.html
<script type="module" src="/src/main.js"></script>
other dependencies
# http requests
npm install axios
# internationalization
npm install --save-exact vue-i18n@9.1.10
# testing tools
npm install -D \
@testing-library/vue \
@testing-library/user-event \
@testing-library/jest-dom
# API mocking
npm i -D msw
# bootstrap
npm install bootstrap
# CSS
npm install -D sass
final setup
package.json
rename test:unit
to just test
test code example at 5min / 8min
- 9min vitest.config.js
- 10min .eslintrc.cjs - vitest
- 10:40 setup files
12min writing the first test
// src/views/sign-up/SignUp.spec.js
describe('Sign Up', () => {
it('has Sign Up header', () => {
render(SignUp)
const header = screen.getByRole('heading', { name: 'Sign Up' })
expect(header).toBeInTheDocument()
})
})
code to pass the test:
<!-- src/views/sign-up/SignUp.vue -->
<template>
<h1>Sign Up</h1>
</template>
16:10 cleanup the App.vue
19min explains the @
in the path
20min jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}