💾 Archived View for gemini.brunofontes.net › blog › jest-vuejs-laravel.gmi captured on 2023-11-04 at 11:08:58. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2020-11-07)
-=-=-=-=-=-=-
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:
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"
],
}
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();
});
});
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.