typescript - test de composant cypress avec le bundler rollup

Le principal empaqueteur dans mon mono-dépôt est rollup. J'essaie de configurer le test de composants Cypress en suivant la documentation ici. Mon fichier cypress.config.ts est ci-dessous

const INIT_FILEPATH = path.resolve(__dirname, './initCypress.js')

async function startDevServer(cypressConfig: Cypress.PluginConfigOptions) {
    const { indexHtmlFile } = cypressConfig

    const loader = fs.readFileSync(INIT_FILEPATH, 'utf8')

    const server = express()
    server.use(express.static('__cypress'))
    server.use(express.static('cypress/support/component.ts'))

    server.get(
        `${cypressConfig.devServerPublicPathRoute}/index.html`,
        async (_req, res) => {
            // read custom index.html file
            const html = await fs.promises.readFile(
                path.join(
                    cypressConfig.projectRoot,
                    cypressConfig.indexHtmlFile,
                ),
                { encoding: 'utf8' },
            )

            const root = parse(html)

            const scriptTagsToInject = root.childNodes.filter(
                node =>
                    node instanceof HTMLElement && node.rawTagName === 'script',
            )

            const indexHtmlPath = path.resolve(projectRoot, indexHtmlFile)

            let indexHtmlContent = await fs.promises.readFile(indexHtmlPath, {
                encoding: 'utf8',
            })

            // Inject the script tags
            indexHtmlContent = indexHtmlContent.replace(
                '<head>',
                `<head>
                ${scriptTagsToInject.join('')}
                `,
            )

            // find </body> last index
            const endOfBody = indexHtmlContent.lastIndexOf('</body>')

            // insert the script in the end of the body
            const newHtml = `
        ${indexHtmlContent.substring(0, endOfBody)}
        <script>${loader}</script>
        ${indexHtmlContent.substring(endOfBody)}
      `
            res.end(newHtml)
        },
    )

    const { projectRoot } = cypressConfig
    const supportFilePath = cypressConfig.supportFile
        ? cypressConfig.supportFile.replace(projectRoot, '')
        : false

    // load support file
    server.get(
        `${cypressConfig.devServerPublicPathRoute}${supportFilePath}`,
        (_req, res) => {
            res.sendFile(path.resolve(cypressConfig.supportFile.toString()))
        },
    )

    // load spec files dynamically
    server.get(/.*\.cy.(js|jsx|ts|tsx)$/, (req, res) => {
        const specFile = req.url?.replace(
            cypressConfig.devServerPublicPathRoute,
            '',
        )
        res.sendFile(path.resolve(specFile))
    })

    server.use(
        cypressConfig.devServerPublicPathRoute,
        express.static('./cypress'),
    )

    const app = server.listen(3000)

    return {
        port: 3000,
        close: () => app.close(err => process.exit(err ? 1 : 0)),
        name: 'cypress:main',
        root: projectRoot,
        base: `${cypressConfig.devServerPublicPathRoute}`,
    }
}

export default defineConfig({
    component: {
        async devServer({ cypressConfig }) {
            const { port, close, base, root } = await startDevServer(
                cypressConfig,
            )

            return {
                port,
                close,
                base,
                root,
            }
        },
        indexHtmlFile: './cypress/support/component-index.html',
        specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
        supportFolder: './cypress/support',
    },
})

Mon initCypress.js est exactement tel qu'écrit ici et expliqué dans la documentation ici.

Le problème est que mon fichier de support cypress/support/component.ts ainsi que mes fichiers de spécifications ne sont pas compilés ou regroupés par mon compilateur rollup ou typescript. Par conséquent, mon test Cypress renvoie l'erreur ci-dessous. Notez les fichiers component.ts et DataLabelCustmisation.cy.jsx. Lorsque j'ai changé component.ts en component.js, j'ai obtenu une erreur différente à import { mount } from 'cypress/react18'. Cela est compréhensible car la dépendance cypress n'a pas été regroupée avec component.ts. Ma question est : dois-je regrouper chaque fichier/spécification avec ses dépendances individuellement ? Quelle est la bonne manière de gérer les bundles dans ce cas avec rollup ? Toute aide sera appréciée.