Pruebas unitarias de los componentes de Vue

¡Acostúmbrate a escribir juntos! Este es el segundo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

Pruebas unitarias de los componentes de Vue

Expliquemos brevemente las pruebas unitarias: es para probar la entrada y la salida de la función, y usar el método de aserción para juzgar si el resultado del caso de uso que ingresamos es el mismo que el resultado de nuestra entrada real.

La prueba unitaria de componentes es usar herramientas de prueba unitaria para probar varios estados y comportamientos de los componentes.

Los beneficios de las pruebas unitarias de componentes

• Proporciona documentación que describe el comportamiento de los componentes.
• Ahorre tiempo en las pruebas manuales
• Reduzca los errores al desarrollar nuevas funciones
• Diseño mejorado
• Facilitar la refactorización

Listo para trabajar

Antes de que podamos realizar pruebas unitarias de simulacros, debemos configurar un poco el entorno.

Instalar dependencias

• Ver utilidades de prueba

npm install --save-dev jsdom jsdom-global
复制代码

• Hay

npm install --save-dev jest
复制代码

• vue-es

npm install --save-dev @vue/vue2-jest # (use the appropriate version)
复制代码

• babel-es

yarn add --dev babel-jest @babel/core
复制代码

Instalar dependencias de prueba

yarn add jest @vue/test-utils vue-jest babel-jest -D -W
复制代码

Hay un pequeño problema aquí. Si usa el comando emitido para instalar, habrá un pequeño error

yarn add jest @vue/test-utils vue-jest babel-jest -D
复制代码

Captura de pantalla del error:

Configuración de broma

es.config.js

module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [
    "js",
    "json",
    // 告诉 Jest 处理 `*.vue` 文件
    "vue"
  ],
  "transform": {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\\.(vue)$": "vue-jest",
    // 用 `babel-jest` 处理 js
    ".*\\.(js)$": "babel-jest" 
  }
}
复制代码

Configuración de Babel

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env'
    ]
  ]
}
复制代码

Puente con Babel

yarn add babel-core@bridge -D -W
复制代码

Instale el paquete acumulativo y los complementos necesarios

yarn add rollup rollup-plugin-terser [email protected] vue-template-compiler -D -W
复制代码

Archivo de configuración acumulativo

Crear rollup.config.js en el directorio de botones

import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
复制代码

Configure el script de compilación y ejecútelo.

Encuentre la configuración de scripts de package.json en el paquete de botones

"build": "rollup -c"
复制代码

ejecutar el embalaje

yarn workspace lg-button run build
复制代码

Empaquetar todos los componentes

Instalar dependencias

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码

archivo de configuración

Cree rollup.config.js en el directorio raíz del proyecto

... Ligeramente, hay demasiadas configuraciones aquí, enviaré el código a mi propio repositorio de archivos y luego podrá acceder a él a través de la dirección debajo del artículo para ver gitee.com/liuyinghao1...

Establezca los campos principal y de módulo en package.json en cada paquete

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码

Configurar scripts en package.json en el directorio raíz

"build": "rollup -c"
复制代码

Crear un caso de prueba:

Dirección del proyecto: gitee.com/liuyinghao1…

Usamos: packages\inputel inputcomponente para probar

Cree input.test.js después de crear una carpetapackages\input debajo de la carpeta__tests__

Aquí hay algunas API de uso común para popularizarlas.

Caso de prueba:

import input from '../src/input.vue'
import { mount } from '@vue/test-utils' // 挂载

describe('lg-input', () => {
  test('input-text', () => {
    const wrapper = mount(input)
    expect(wrapper.html()).toContain('input type="text"')
  })
})
复制代码

Este caso de uso es muy simple, solo quiero saber si estamos produciendo un cuadro de texto, aquí se escribe un caso de prueba simple y luego lo ejecutamos:

yarn test
复制代码

La prueba pasa, y luego hacemos una ligera modificación.

expect(wrapper.html()).toContain('input type="tex123123123t"')
复制代码

prueba nuevamente

prueba fallida

Resumir

En este punto, nuestra prueba unitaria versión simple Demo ha terminado. Las pruebas unitarias siguen siendo muy importantes para el desarrollo de nuestros componentes. Con stroyBooks, podemos hacer mucho.