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.
1
> yarn add jest vue-jest babel-jest @vue/test-utils jest-serializer-vue [email protected]^7.0.0-bridge.0 --dev
Copied!
1
// https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
2
package.json
3
"scripts": {
4
"test": "jest",
5
"test:watch": "jest --watch"
6
},
7
"jest": {
8
"roots": [
9
"app/javascript"
10
],
11
"moduleDirectories": [
12
"node_modules",
13
"app/javascript"
14
],
15
"moduleNameMapper": {
16
"^@/(.*)quot;: "app/javascript/$1"
17
},
18
"moduleFileExtensions": [
19
"js",
20
"json",
21
"vue"
22
],
23
"transform": {
24
"^.+\\.jsquot;: "<rootDir>/node_modules/babel-jest",
25
".*\\.(vue)quot;: "<rootDir>/node_modules/vue-jest"
26
},
27
"snapshotSerializers": [
28
"<rootDir>/node_modules/jest-serializer-vue"
29
]
30
},
Copied!
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
1
> yarn test
2
FAIL config/webpack/test.js
3
● Test suite failed to run
4
5
Your test suite must contain at least one test.
Copied!
Un ejemplo de test básico usando el componente que instala el setup:
App.vue
1
<template>
2
<div id="app">
3
<p>{{ message }}</p>
4
</div>
5
</template>
6
7
<script>
8
export default {
9
data: function () {
10
return {
11
message: "Hello Platanus!"
12
}
13
}
14
}
15
</script>
16
17
<style scoped>
18
p {
19
font-size: 2em;
20
text-align: center;
21
}
22
</style>
Copied!
App.spec.js
1
import { shallowMount } from '@vue/test-utils';
2
import App from './app.vue';
3
4
describe('app.vue', () => {
5
it('displays message on load', () => {
6
const wrapper = shallowMount(App);
7
expect(wrapper.find('p').text()).toEqual('Hello Platanus!');
8
});
9
});
Copied!
1
PASS app/javascript/app.spec.js
2
app.vue
3
✓ displays message on load (25ms)
Copied!
Última actualización 1d ago
Copiar enlace