es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ejecutando pruebas de Cypress con TailwindCSS 3

17 Jul, 2023 Programación

He estado ejecutando mis pruebas de componentes a través de cypress open-ct durante un tiempo, confiando en la importación de /node_modules/tailwindcss/dist/tailwindcss.min.css.

Desde la actualización a Tailwind v3, algunas de mis pruebas están fallando porque no hay un archivo CSS precompilado que pueda importar, todo se genera al momento.

Por ejemplo, la prueba de cerrar un modal al hacer clic en una capa superpuesta que está fija y ocupa todo el ancho falla, ya que el modal completo se renderiza y se vuelve inaccesible para Cypress.

Otro problema secundario que surge por no tener acceso a las clases de Tailwind es que los videos grabados al ejecutar pruebas en CI no son utilizables, ya que solo son un montón de elementos nativos aleatorios.

He estado importando Tailwind de esta manera al comienzo de cada archivo de prueba (antes de los bloques “describe”):

import { mount } from '@cypress/vue'
import '/node_modules/tailwindcss/dist/tailwind.min.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";

¿Algún idea de cómo incluir Tailwind (preferiblemente de forma global) para evitar que las pruebas fallen?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como Tailwind v3 genera CSS justo a tiempo, ya no es posible importar archivos CSS predefinidos en pruebas de componentes. Esto ha causado que algunas pruebas fallen, por ejemplo, al probar si un modal se cierra al hacer clic en una superposición que está fija y tiene el ancho completo.

    Para resolver este problema, es necesario incluir Tailwind globalmente en las pruebas. Una forma de hacer esto es crear un archivo CSS con todas las clases de Tailwind e importarlo en el archivo index.html. Otra opción es agregar el complemento postcss-import al archivo de configuración de Cypress, lo que permite importar Tailwind en cada archivo de prueba. Aquí tienes un ejemplo de cómo hacer esto:

    1. Instala el complemento ejecutando npm install --save-dev postcss-import
    2. Agrega el complemento y sus opciones al archivo de configuración de Cypress (cypress.json):
    {
  "env": {},
  "baseUrl": "",
  "ignoreTestFiles": "*.md",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "pluginsFile": "cypress/plugins/index.js",
  "supportFile": "cypress/support/index.js",
  "experimentalComponentTesting": {
    "componentFolder": "cypress/component",
    "testFileFolder": "tests",
    "pluginsFile": "cypress/plugins/component.js",
    "componentTestPackages": [
      "@cypress/vue",
      "@cypress/react",
      "@cypress/angular"
    ],
    "vue": {
      "babel": true,
      "postCss": {
        "plugins": {
          "postcss-import": {
            "path": ["cypress/"]
          },
          "tailwindcss": {}
        }
      }
    }
  }
}

    En el objeto vue, agregamos la opción postCss con los complementos postcss-import y tailwindcss. También especificamos la ruta a nuestra carpeta cypress, ya que aquí es donde se encuentra nuestro archivo de configuración de Tailwind (tailwind.config.js).

    1. Crea un archivo de configuración de Tailwind (tailwind.config.js) en la raíz de tu proyecto:
    const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

    En este caso, activamos el modo JIT estableciendo mode: 'jit' y lo configuramos para eliminar los estilos no utilizados en nuestra carpeta src.

    1. Importa las clases de Tailwind en tus archivos de prueba como de costumbre:
    import { mount } from '@cypress/vue'
import '../../styles/tailwind.css'
import MultiSelectField from './MultiSelectField.vue'
import { ref } from "vue";

describe('MultiSelectField', () => {
  // ...
})

    Al agregar el complemento postcss-import a nuestro archivo de configuración de Cypress, ahora podemos importar Tailwind en cada archivo de prueba y evitar pruebas fallidas causadas por estilos faltantes.

Comments are closed.