Comment on page
Testing
Para realizar tests unitarios dentro de Rails y Vue se puede usar Jest y Vue Test Utils. Como siempre, la documentación de Vue es un buen punto de partida.
En proyectos nuevos Potassium ya incluye los archivos y la configuración necesaria para empezar a testear. En proyectos antiguos sigue los siguientes pasos para tener un ambiente listo para realizar pruebas de manera local.
> yarn add jest vue-jest babel-jest @vue/test-utils jest-serializer-vue babel-core@^7.0.0-bridge.0 --dev
// https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
package.json
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
},
"jest": {
"roots": [
"app/javascript"
],
"moduleDirectories": [
"node_modules",
"app/javascript"
],
"moduleNameMapper": {
"^@/(.*)$": "app/javascript/$1"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
},
Para ejecutar los tests en un ambiente CI (como CircleCI), copia los cambios correspondientes de bin/ci_build, .circleci/config.yml y docker-compose.ci
> yarn test
FAIL config/webpack/test.js
● Test suite failed to run
Your test suite must contain at least one test.
Un ejemplo de test básico usando el componente que instala el setup:
App.vue<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Platanus!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
App.spec.jsimport { shallowMount } from '@vue/test-utils';
import App from './app.vue';
describe('app.vue', () => {
it('displays message on load', () => {
const wrapper = shallowMount(App);
expect(wrapper.find('p').text()).toEqual('Hello Platanus!');
});
});
PASS app/javascript/app.spec.js
app.vue
✓ displays message on load (25ms)
Última actualización 1yr ago