108 lines
2.7 KiB
Plaintext
108 lines
2.7 KiB
Plaintext
|
# Configuring Jest to test your VueJS on Laravel 5.8
|
||
|
|
|
||
|
|
Jest is one of the most used tools to test JavaScript, but it requires some configuration to work with VueJS on Laravel. So here it goes a very simple and direct way to do that:
|
||
|
|
|
||
|
|
## Configuring...
|
||
|
|
|
||
|
|
1. Install the followgin dependencies, for dev only: @vue/test-utils, babel-core, babel-jest, babel-loader, babel-preset-env, jest and vue-jest:
|
||
|
|
|
||
|
|
```
|
||
|
|
$ npm i -D @vue/test-utils babel-core babel-jest babel-loader babel-preset-env jest vue-jest
|
||
|
|
```
|
||
|
|
|
||
|
|
> Laravel had already installed a babel version, but I had to install it again in order to keep everything working
|
||
|
|
|
||
|
|
|
||
|
|
2. Add the following lines in your package.json file:
|
||
|
|
|
||
|
|
- Inside scripts node:
|
||
|
|
|
||
|
|
```
|
||
|
|
"scripts": {
|
||
|
|
"test": "jest",
|
||
|
|
"test-watch": "npm run test -- --watch"
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
- Create the following node:
|
||
|
|
|
||
|
|
```
|
||
|
|
"babel": {
|
||
|
|
"env": {
|
||
|
|
"test": {
|
||
|
|
"presets": [
|
||
|
|
["env", {"targets": {"node": "current"}}]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Create a file named jest.config.js on your project root with the following content:
|
||
|
|
|
||
|
|
```
|
||
|
|
module.exports = {
|
||
|
|
verbose: true,
|
||
|
|
moduleFileExtensions: [
|
||
|
|
"js",
|
||
|
|
"json",
|
||
|
|
"vue"
|
||
|
|
],
|
||
|
|
transform: {
|
||
|
|
".*\\.(vue)$": "vue-jest",
|
||
|
|
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
|
||
|
|
},
|
||
|
|
collectCoverage: true,
|
||
|
|
collectCoverageFrom: [
|
||
|
|
"src/components/*.{js,vue}",
|
||
|
|
"!**/node_modules/**"
|
||
|
|
],
|
||
|
|
coverageReporters: [
|
||
|
|
"html",
|
||
|
|
"text-summary"
|
||
|
|
],
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Creating the test...
|
||
|
|
|
||
|
|
Once the dependencies are already installed and configured, you just need to create the tests. Create a new file under resources/js named ExampleComponent.test.js. Let's test the Vue Example Component, that you have already:
|
||
|
|
|
||
|
|
```
|
||
|
|
resources/js/ExampleComponent.test.js
|
||
|
|
|
||
|
|
import { mount } from '@vue/test-utils'
|
||
|
|
import ExampleComponent from './ExampleComponent.vue';
|
||
|
|
|
||
|
|
describe('ExampleComponent', () => {
|
||
|
|
test('is a Vue instance', () => {
|
||
|
|
const wrapper = mount(AttendanceAddress);
|
||
|
|
expect(wrapper.isVueInstance).toBeTruthy();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## Running the test...
|
||
|
|
|
||
|
|
Now go to the console and run:
|
||
|
|
|
||
|
|
```
|
||
|
|
npm test
|
||
|
|
```
|
||
|
|
|
||
|
|
This will test your component. If you found a lot of errors and is solving them at once, run:
|
||
|
|
|
||
|
|
```
|
||
|
|
npm run test-watch
|
||
|
|
```
|
||
|
|
|
||
|
|
This command will automatically re-run your tests when the files were changed.
|
||
|
|
For more info...
|
||
|
|
|
||
|
|
You probably already knows how to use Jest or vue-test-utils, but if you need any help, their sites has the completly description of all asserts.
|
||
|
|
|
||
|
|
=> https://jestjs.io/docs/en/using-matchers Jest
|
||
|
|
=> https://vue-test-utils.vuejs.org/guides/#common-tips Vue-test-utils
|
||
|
|
|
||
|
|
=> /blog/ Back
|