TDD amor durante mucho tiempo, pero en realidad nunca lo utilizó, porque no puedo pruebas de la unidad de escritura, especialmente la prueba de la unidad de interfaz de usuario front-end, ¿qué diablos?
Finalmente yo estaba decidido a intentarlo. Sólo empezar a buscar un libro Ensayos Vue.js aplicación, la lectura sencilla buena sensación, quién sabe, sólo tienes que seguir el ejemplo de la operación de la RAN libro en problemas. No sé, no se debe a la calidad de la red de gama alta atmósfera celestial me llevó a instalar las dependencias hay un problema que llevó al fracaso, o alguna otra cosa, CNPM He tratado, siempre existe este tipo de problema, basta con ejecutar el capítulo 2, capítulo 3-siempre fallaba, finalmente me decidí a poner pruebas de aplicaciones Vue.js de este libro desanime, poner Vue de prueba Utilidades documento web oficial de nuevo.
Para una lista de algunas cosas que participan, también puede ser necesario no el seguimiento:
- vista
- Vista Utilidades de prueba
- por lo demás
- esperar
- vue-a
- babel-es
- hay
- Babel
- Chai
- webpack
- hilo
broma introducido
Junto a Configurar empezar de cero para construir un proyecto vue, y luego broma
- Creación de proyectos webpack sencillo
vue init webpack-simple simple
cd simple
npm i
- Instalación @ vue / test-utils Jest
npm i --save-dev @vue/test-utils jest
- guiones conjunto
// package.json
...
"scripts": {
...
"test": "jest"
...
}
...
- Añadir HelloWorld.vue, y añadir HelloWorld.spec.js archivo de prueba
// src/HelloWorld.vue
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
// src/__test__/HelloWorld.spec.js
空
- Pruebe a ejecutar la prueba NPM plazo, obtenemos el siguiente error
FAIL src/__test__/HelloWorld.spec.js
● Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In D:\zheteng\vuetestdemo\simple2\node_modules\babel-preset-stage-3\lib\index.js
at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (node_modules/@babel/core/lib/config/config-chain.js:320:26)
at node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig (node_modules/@babel/core/lib/config/partial.js:85:55)
Realmente eso no puede leer! Más o menos creo que es el problema de Babel. Fui .babelrc archivo a algo como comentario. De hecho, de las cuales hay algunas cosas que no puedo ir directamente a la muerte .babelrc comentado, he comparado el ejemplo de documento Vue de prueba Utilidades estaba hecho.
{
"presets": [
["env", {
// "modules": false
}]/*,
"stage-3"*/
]
}
- De nuevo ejecutar prueba de funcionamiento MNP, el error cambiado
debido a que el archivo de prueba no es algo que añadir algo
describe('HelloWorld.vue', () => {
it('sanity test', () => {
})
})
éxito
- Probarlo HelloWorld.vue
import HelloWorld from '../HelloWorld.vue'
import { mount } from '@vue/test-utils'
describe('HelloWorld.vue', () => {
it('sanity test', () => {
const wrapper = mount(HelloWorld)
expect(wrapper.vm.msg).toBe('Hello World!')
})
})
Ejecutar prueba de funcionamiento NPM, e incluso ser dado
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files,
ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom
"transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Todavía no sé por qué, es probable que no sabe de importación que, esta vez creo que de ella Babel-broma, y luego instalado todavía este error, se derrumbó.
Pensar en ello, debe ser .vue no saben, esta vez pienso en ello Vue-broma. Ese caballo muerto un caballo de estar médico él.
Entonces también hay que configurar broma, o en un archivo de configuración independiente package.json va a hacer, escribí en un package.json de la siguiente
...
"jest": {
"transform": {
"^.+\\.js": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "vue-jest"
}
}
...
prueba de funcionamiento NPM
saque de llamar a un día
ejecutar el proyecto directamente las pruebas unitarias vue-CLI creado
vue init webpack vue-demo
Esto creará un vue solicitud de una página, y en el proceso de creación nos permitirá elegir si desea o no las pruebas unitarias. Ejecutar unidad de ejecución NPM puede ejecutar pruebas unitarias. Pero, por desgracia no sé qué, que acaba de ser dado
FAIL test\unit\specs\HelloWorld.spec.js
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (<anonymous>)
La sabiduría dice que no sé por qué esto es, ir en línea para buscar, y por fin alguien dice que testURL en http: // localhost / suficiente. Añadir testURL en src / unidad / jest.conf.js en: ' http: // localhost /' similares,
// src/unit/jest.conf.js 这是jest的配置文件
...
testURL: 'http://localhost/'
...
En cuanto a por qué un juego tal, no sé, no he estado en broma entender. Seguimiento de documentos broma de la mirada debe ser claro ahora, de pie una bandera. // TODO: broma documento
Es lógico pensar que este problema no debe ser creado por el andamiaje vue proyecto, porque lo que no sé, espero que en el futuro se sabe que conmigo si hay buena gente diga todo lo mejor :)
Finalmente dejo que la evaluación de la aplicación del capítulo Vue.js-3 Ejemplos corrió :)
05/30/2019
Yo no se contuvo, volver a intentar ejecutar ejemplos de prueba de aplicaciones Vue.js capítulo III de --chapter-3.
- Re-clone git clone https://github.com/eddyerburgh/vue-hackernews
- Instalar las dependencias, i CNPM
- Ejecutar prueba de funcionamiento NPM: unidad, conseguir este localStorage error no está disponible para los orígenes opacos, recuerdo vagamente, que tenía que cambiar de capítulo 2 a capítulo-3 no es un error, soy desordenado. De todos modos, sé cómo resolver este error, el instrumento se ha dicho!
- En la prueba de ejecución NPM ejecución: unidad resultó ser un éxito, estrangulador Yuning
Continuará. . .
