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.

Resolver módulos en pruebas de Testcafe utilizando TypeScript.

En mi prueba de testcafe (1.17.1), me encontré con un problema de resolución de módulos. Tengo una prueba en el archivo “test.e2e.ts” en la carpeta de pruebas “/tests” con el siguiente código:

import {MyComponent} from '../src/MyComponent';
...
...
fixture('Pruebas de dominio personalizado');

test('Prueba 1', async () => {
  ...
  ...
});

El archivo “MyComponent.tsx” se encuentra en la carpeta de origen “/src” con el siguiente código:

import React, { FunctionComponent } from 'react';
import styles from '../scss/MyComponent.module.scss';

export const MyComponent: FunctionComponent = () => {
  ...
  ...
}

Al ejecutar “testcafe ./tests/test.e2e.ts”, siempre obtengo el error de TypeScript:

Error: La compilación TypeScript ha fallado.
Cannot find module '../scss/MyComponent.module.scss' or its corresponding type declarations.

Mi archivo “testcafe” “tsconfig” vino con una configuración de ruta, y el archivo “scss-module-for-tests.ts” en “” solo exporta un string vacío:

// .testcaferc.json en <root>/
{
  "compilerOptions": {
    "typescript": {
      "options": {
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
          "../scss/MyComponent.module.scss": ["scss-module-for-tests.ts"],
          "*.scss": ["scss-module-for-tests.ts"]
        }
      }
    }
  }
}

Sin embargo, parece que la configuración de la ruta de TypeScript no resuelve las rutas relativas ni acepta una expresión regular, pero mi proyecto tiene muchas importaciones de este tipo “../scss/*module.scss”. ¿Hay alguna manera de resolver directamente el archivo “scss” para testcafe?

¡Gracias anticipadamente!

Actualización del 12/02/2021:
Intenté agregar un compilador para testcafe según esta documentación, coloqué un archivo “.testcaferc.json” en la carpeta raíz:

//.testcaferc.json at <root>
{
  "compilerOptions": {
    "typescript": {
      "options": {
        "esModuleInterop": "true"
      }
    }
  }
}

Pero parece que la configuración “esModuleInterop=true” no llega a testcafe.

Actualización del 12/13/2021:
No es fácil configurarlo correctamente, pero eliminé la referencia del archivo “*.scss” en el código de la prueba. Problema resuelto.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que hay un problema con la resolución del archivo scss directamente para TestCafe debido a las limitaciones de la configuración de ruta de TypeScript. Una posible solución podría ser agregar una configuración de Webpack específica para TestCafe y usar los loaders apropiados (por ejemplo, sass-loader, css-loader) para resolver los archivos scss. Esto requeriría un poco de configuración, pero podría resolver el problema.

    Otra posible solución podría ser modificar las importaciones en el código de prueba para hacer referencia directamente al archivo scss, en lugar de confiar en rutas relativas. Por ejemplo, en lugar de import styles from '../scss/MyComponent.module.scss', podrías usar import styles from 'MyComponent.module.scss' y modificar las rutas de tsconfig en consecuencia.

    También es importante tener en cuenta que la actualización de .testcaferc.json con esModuleInterop = true puede no haber resuelto el problema porque no está claro si se aplicó correctamente o si era la solución adecuada para este problema en particular.

    En cualquier caso, es importante probar a fondo cualquier cambio y asegurarse de que no tenga consecuencias no deseadas antes de implementar en producción.

Comments are closed.