Cómo configurar el marco de prueba de Jest para Laravel Mix

Este artículo fue escrito para laravel-mix@0.11.3 y jest@19.0.2

Mix es una nueva herramienta que lo ayuda a construir activos front-end para su aplicación Laravel sin tocar directamente la API de Webpack.

Aunque es algo obstinado, en verdad no requiere mucho esfuerzo personalizar Mix o integrarlo con otras herramientas. Aquí veremos cómo configurar el popular marco de prueba Jest.

¿Por qué bromear?

Hasta que acceda a los componentes de un solo archivo Vue, Jest toma la menor cantidad de esfuerzo para configurar. También tiene un buen impulso en la industria con el respaldo de Facebook y es un marco de prueba oficial en la aplicación Create React. Jest tiene características populares como notificaciones del sistema operativo, almacenamiento en caché, etc. que se proporcionan de fábrica y las versiones recientes han demostrado ser muy rápidas.

El primer paso es instalar las dependencias necesarias:

npm install --save-dev jest babel-jest

A continuación, agreguemos Jest a nuestros scripts npm. Aunque el marco ya establece la variable NODE_ENV para probar, la pasamos aquí explícitamente para que su valor no sea anulado accidentalmente por su entorno:

"test": "cross-env NODE_ENV = prueba de broma",
"tdd": "npm run test - --watch --notify",

En este punto, ya puede ejecutar Jest y con el transformador babel-jest instalado, incluso intentará transpilar sus archivos JavaScript, pero nuestra configuración aún no está allí.

En primer lugar, queremos asegurarnos de que Jest no procese archivos innecesarios agregando las siguientes líneas a su paquete.json:

"broma": {
  "raíces": [" / resources / assets / js /"]
}

Esto le indicará a Jest que solo busque archivos en un directorio específico.

En segundo lugar, babel-jest no sabe realmente cómo proceder debido a que Laravel Mix no expone sus configuraciones de babel. Vamos a sumergirnos en la fuente al extraer la configuración necesaria en el .babelrc de nuestro proyecto:

Ahora, este es un archivo que babel-jest recogerá automáticamente al hacer transformaciones. Sin embargo, esto no funcionará porque si bien Webpack 2.0+ puede procesar módulos ES6, Node.js no puede y puede haber otras opciones que deseemos aplicar específicamente para nuestras pruebas. Lo que queremos usar es la opción env .babelrc que combinará configuraciones para un entorno específico:

Con la configuración anterior, se le dice a babel-jest que transforme las declaraciones de importación a CommonJS.

Si por casualidad, ya ha anulado su .babelrc y utiliza la propuesta de sintaxis de importación dinámica, asegúrese de reemplazarlo con babel-plugin-dynamic-import-node para el entorno de prueba.

Ahora está listo para usar Jest en su aplicación Laravel. Puede seguir junto con su documentación para más detalles. Para ejecutar pruebas, ejecute:

prueba npm

El resto de este artículo abordará algunos de los trucos y trucos más populares al usar Jest. Siéntase libre de omitir estas secciones hasta que encuentre problemas relacionados.

Cómo hacer que Jest esté al tanto de resolve.modules

Digamos que golpeó una pared con importaciones como esta:

importar MyComponents desde './../../../MyComponent.vue'

y quieres algo más elegante. Configura la instancia de Webpack subyacente en Laravel Mix para buscar módulos compartidos en el directorio de elección además de los módulos_nodo habituales:

.webpackConfig ({
  resolver: {
    módulos: [path.resolve (__ dirname, 'resources / assets / js / modules'), 'node_modules']
  }
})

Luego, suponiendo que su componente esté ubicado directamente en el directorio de módulos, ahora puede importarlo de una manera más sucinta:

importar MyComponents desde 'MyComponent.vue'

Para que Jest esté al tanto de estas travesuras, simplemente agregue la opción moduleDirectories a su configuración package.json:

"broma": {
  "root": [" / resources / assets / js /"],
  "moduleDirectories": ["resources / assets / js / modules", "node_modules"]
}

¿Cómo burlarse de los activos estáticos?

Aunque es poco probable, puede encontrarse con archivos de prueba que importan activos estáticos. Podemos burlarnos de estos activos de esta manera:

{
  "broma": {
    "root": [" / resources / assets / js /"],
    "moduleNameMapper": {
      "\\. (jpg | jpeg | png | gif | eot | otf | svg | ttf | woff | woff2) $": " /resources/assets/js/jest/mocks/fileMock.js",
      "\\. (css | less | scss) $": " /resources/assets/js/jest/mocks/styleMock.js"
    }
  }
}

Y los archivos simulados en sí mismos:

recursos / activos / js / jest / mocks / styleMock.js

module.exports = {}

recursos / activos / js / jest / mocks / fileMock.js

module.exports = 'prueba-archivo-stub'

Cómo probar componentes de un solo archivo Vue (experimental)

Nos inspiraremos en este increíble artículo escrito por Cristian Carlesso.

Primero, cree un transformador vue-jest.js personalizado en el directorio resources / assets / js / jest / transformers:

Luego edite su package.json jest config:

"broma": {
  "root": [" / resources / assets / js /"],
  "moduleNameMapper": {
    "^ vue $": "vue / dist / vue.common.js"
  },
  "transformar": {
    "^. + \\. vue $": " /resources/assets/js/jest/transformers/vue-jest.js",
    "^. + \\. js $": "babel-jest"
  },
  "coveragePathIgnorePatterns": [" / resources / assets / js / components"]
}

Aquí le indicamos a Jest que transforme los archivos vue y resuelva Vue en su totalidad en lugar de compilación solo en tiempo de ejecución (porque eso es lo que está haciendo Laravel Mix bajo el capó)

Tenga en cuenta que también ignoramos los componentes de Vue cuando hacemos cobertura de código. Eso es casi un barrido bajo la solución de alfombra para un problema conocido con Jest no haciéndolo correctamente. Sin embargo, si sabe cómo solucionar esto, no dude en comentar.

Eso es. Disfrute de su flujo de trabajo de prueba de unidad con Laravel Mix y Jest.