typescript - prueba de componentes con cypress y empaquetador rollup

El empaquetador principal en mi mono-repo es rollup. Estoy intentando configurar la prueba de componentes de Cypress siguiendo la documentación aquí. Mi archivo cypress.config.ts está abajo

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',
    },
})

Mi initCypress.js es exactamente como se escribe aquí y se explica en la documentación aquí.

El problema es que tanto mi archivo de soporte cypress/support/component.ts como los archivos de especificación no se compilan ni se agrupan por mi compilador rollup o typescript; como resultado, mi prueba de cypress arroja el error que se muestra a continuación. Observa los archivos component.ts y DataLabelCustmisation.cy.jsx. Cuando cambié component.ts a component.js, obtuve un error diferente en import { mount } from 'cypress/react18'. Esto es comprensible porque la dependencia de cypress no se agrupó junto con component.ts. Mi pregunta es: ¿Tengo que agrupar cada archivo/especificación con sus dependencias individualmente? ¿Cuál es la forma correcta de manejar los bundles en este caso con rollup? Cualquier ayuda será apreciada.