mocha.js - Mezclando módulos de TypeScript y JavaScript al ejecutar pruebas de Mocha

resumen; Quiero convertir mi proyecto de JS a TS un archivo a la vez mientras puedo ejecutar pruebas de Mocha sin un paso de compilación.

Utilizo muchas transformaciones de Babel (propiedades de clase, jsx, ...) en mi código actual de JavaScript, que Mocha maneja en tiempo de ejecución registrando el cargador de Babel (básicamente mocha --require @babel/register). Esto significa que ejecutar una sola prueba es rápido y no requiere un paso de compilación para todo el proyecto.

Seguí una guía sobre cómo empezar con TypeScript usando el plugin (relativamente) nuevo de Babel de Microsoft: @babel/preset-typescript. Esto funcionó bien para el caso básico: convertir app.js a app.ts.

Lo que no cubría era cómo hacer una transición paso a paso. Para mí, arreglar 3978 errores de TypeScript (conteo real después de hacer el <code>find</code> ...) es un poco abrumador y detendría el desarrollo durante dos semanas. Solo lograr que mi biblioteca de helpers de 200 LOC se compilara correctamente con las definiciones de react-redux tomó más de una hora.

Mientras que hacer git mv app.{j,t}s funcionaba bien, hacerlo con cualquier otro archivo fue un desastre. Los tests existentes de Mocha se estrellaban rápidamente al no poder encontrar los archivos correctos, incluso al registrar Babel y agregar extensiones adecuadas:

mocha --extension js,jsx,ts,tsx --require @babel/register

Normalmente, si hago git mv Logger.{j,t}s, obtendría Error: No se puede encontrar el módulo './lib/logging/Logger'.

¿Existe una manera de hacer que el cargador de módulos de Mocha reconozca archivos TypeScript y los ejecute de manera transparente a través de Babel?

Respuesta #1

Aquí está cómo logré que esto funcione en nuestra base de código Frankenstein mixta de JavaScript/TypeScript. Mocha simplemente transpila el código antes de ejecutar nuestras pruebas. Esto lo hace todo en un solo paso en lugar de dos pasos separados. Esta es mi configuración a continuación. Podrías reemplazar las opciones de mocha simplemente agregando estas como banderas de línea de comandos.

// .mocharc.js
module.exports = {
    diff: true,
    extension: ['ts', 'tsx', 'js'], // include extensions
    opts: './mocha.opts', // point to you mocha options file. the rest is whatever.
    package: './package.json',
    reporter: 'spec',
    slow: 75,
    timeout: 2000,
    ui: 'bdd'
};

// mocha.opts
--require ts-node/register/transpile-only // This will transpile your code first without type checking it. We have type checking as a separate step.
// ...rest of your options.

// package.json
{
  "scripts": {
    "test": "mocha"
  }
}

actualización: incluyendo opciones relevantes de tsconfig para un proyecto de React convertido:

{
    "compilerOptions": {
        "noEmit": true, // This is set to true because we are only using tsc as a typechecker - not as a compiler.
        "module": "commonjs",
        "moduleResolution": "node",
        "lib": ["dom", "es2015", "es2017"],
        "jsx": "react", // uses typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allows a partial TypeScript and JavaScript codebase
        "checkJs": true, // checks types in .js files (https://github.com/microsoft/TypeScript/wiki/Type-Checking-JavaScript-Files)
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
    },
    "include": [
        "./src/**/*.ts",
        "./src/**/*.tsx",
        "./src/pages/editor/variations/**/*" // type-checks all js files as well not just .ts extension
    ]
}