Testing VueJS projects
About
In this talk we're going to learn how to setup testing tools at our projects, create tests and eventually realizing the importancy of testing our projects.
Why test?
- Quality Code
You're sure that the code does what we expect.
- Design focus on the needs
You understand the requirements, you design based on that and you build thinking on that.
- Less debugging more coding
With more test, few errors you'll have.
Tools we're going to use
- Jest
- Vue Client
- Terminal
Types of Test
- Unit
The idea of a "unit" in testing, is to break down the code into small, easily testable parts.
- E2E
Unlike a unit test, you're testing the entire application.
We're not going to talk about E2E
neither Snapshop
. For now let's focus on Unit testing
only.
Unit
and E2E
Comparison between Pros | Cons | |
---|---|---|
Unit testing | - Tests run fast - Test can be precise and allow you to identify problems |
- Time-consuming to write tests for every aspect of your app |
E2E testing | - Can test many things at once - Assure you that you have a working system |
- Slow to run - You may took a while to find the cause of failure |
Unit Testing
Quick notes on how to install the testing tool.
Installing Jest
Fastest way (With Vue CLI)
Execute the following command - Sit and wait 'till everything is done, or just go grab a coffee ☕
vue add @vue/unit-jest
It'll add some files so we'll be ready to start working with tests. 🙌
"Hey buddy, I don't think my project have Vue CLI installed. Can I add it so I won't have that much effort?"
Hum.... yes?
Execute the following command... It should work. However I think it may cause an architecture issue, just saying...
yarn add @vue/cli-service --dev
Installing manually 💪
You'll need to install the jest
in your project:
yarn add jest jest-transform-stub jest-vue-preprocessor babel-jest vue-jest @vue/test-utils --dev
Are you facing Unexpected token {
? If so, it means your project has a lack of some libraries
yarn add babel-core babel-preset-env --dev
After that, we need to configure some files so we'll be good to go:
- .babelrc:
{
"presets": [
"babel-preset-env"
]
}
- jest.config.js:
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/resources/js/components/$1'
},
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
]
}
- package.json:
{
"scripts": {
"test:unit": "jest"
}
}
How to test it?
The command below will call jest and test everything:
yarn test:unit
If at some point you're using TDD. Maybe you'll need to add --watch
and add a new script for that. Just do it!
Brief explanation
If at this point you still don't know some keywords for Javascript testing:
- describe: Responsible for grouping every test
- it: Where test goes
- test: is an alias. it'll do the same thing
- expect: Where comparison is made
Testing
Live:
Creating our first test in our meeting
Repository:
Tips: Testing asynchronous functions
For asynchronous functions we can use flush-promises
. It flushes all pending resolved promise handlers
Installing:
yarn add flush-promises --dev
Then adding in your test files:
import flushPromises from 'flush-promises'
...
it('async call', async () => {
wrapper.find('button.add').trigger('click')
await flushPromises()
expect(something).toBe(true)
})
E2E Testing
🚧 Under construction
Just so you know, this is what an E2E test looks like:
Image from dev.to
Snapshot Testing
🚧 Under construction
Just so you know, this is what an Snapshop test looks like:
QA
Ask me anything, Google will answear it anyway.
Links
- @vue/test-utils
- Jest cheat sheet
- Snapshot Testing
- The What, Why and How of React testing
- Unit testing cheat sheet
- Unit vs E2E Testing for Vue.js
The end
If you're reading this, I'd like to thank you for the support.
See ya!