ไทป์สคริปต์ - การทดสอบคอมโพเนนต์ไซเพรสด้วยโรลอัพบันเดิลเลอร์

ตัวรวมหลักในมอโนรีโพของฉันคือ rollup ฉันกำลังพยายามตั้งค่า cypress สำหรับการทดสอบคอมโพเนนต์ตามเอกสารที่นี่ ไฟล์ cypress.config.ts ของฉันอยู่ด้านล่าง

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

ไฟล์ initCypress.js ของฉันตรงตามที่เขียนไว้ที่นี่และอธิบายในเอกสารที่นี่

ปัญหาคือไฟล์สนับสนุนของฉัน cypress/support/component.ts และไฟล์สเปคของฉันไม่ถูกคอมไพล์หรือถูกรวมโดยคอมไพเลอร์ rollup หรือ typescript ดังนั้นการทดสอบ Cypress ของฉันจึงเกิดข้อผิดพลาดดังด้านล่าง ให้สังเกตไฟล์ component.ts และ DataLabelCustmisation.cy.jsx เมื่อฉันเปลี่ยน component.ts เป็น component.js ฉันได้ข้อผิดพลาดที่แตกต่างกันที่ import { mount } from 'cypress/react18' ซึ่งเป็นเรื่องเข้าใจได้เพราะว่า dependency ของ cypress ไม่ได้ถูกรวมมาพร้อมกับ component.ts คำถามของฉันคือ ฉันต้องรวมไฟล์/สเปคแต่ละไฟล์พร้อมกับ dependency ของมันแยกกันหรือไม่? วิธีที่ถูกต้องในการจัดการกับ bundle ในกรณีนี้ด้วย rollup คืออะไร? จะขอบคุณมากหากได้รับความช่วยเหลือ.