ค้นหาเว็บไซต์

reactjs - การทดสอบคอมโพเนนต์ด้วย Cypress สำหรับการตั้งค่าเซิร์ฟเวอร์พัฒนาที่กำหนดเองของ React Microbundle (Rollup)


ฉันกำลังพยายามตั้งค่ากลยุทธ์การทดสอบคอมโพเนนต์สำหรับรีโป React ใหม่ที่เรากำลังทำงานอยู่ที่นี่

ตามเอกสารของ Cypress ไม่มีรายละเอียดที่เป็นประโยชน์เกี่ยวกับวิธีการกำหนดค่าการทดสอบคอมโพเนนต์โดยใช้เซิร์ฟเวอร์พัฒนาแบบกำหนดเองเช่นนี้

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer(cypressConfig) {
      // return dev server instance or a promise that resolves to
      // a dev server instance here
    },
  },
})

ไฟล์ package.json ของฉันมีลักษณะเหมือนอันนี้:

  "source": "src/index.ts",
  "exports": {
    "require": "./dist/index.cjs",
    "default": "./dist/index.modern.js"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.module.js",
  "unpkg": "./dist/index.umd.js",
  "typings": "dist/index",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch",
    "pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
    "test": "jest",
    "ci:start-example": "cd example; npm start",
    "cy:open": "npx cypress open"
  },
  "dependencies": {
    "react-style-object-to-css": "^1.1.2"
  },
  "peerDependencies": {
    "react": "16 - 18",
    "react-dom": "16 - 18"
  },
  "devDependencies": {
    "@testing-library/cypress": "^8.0.3",
    "@types/jest": "^28.1.6",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.31.0",
    "@typescript-eslint/parser": "^5.31.0",
    "cypress": "^10.3.1",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "jest": "^28.1.3",
    "microbundle": "^0.15.0",
    "prettier": "^2.7.1",
    "ts-jest": "^28.0.7",
    "typescript": "^4.7.4"
  },
  "files": [
    "dist"
  ]
}

มีใครกำลังเจอปัญหาเดียวกันกับเซิฟเวอร์พัฒนาที่กำหนดเองหรือเปล่า? ฉันไม่ค่อยคุ้นเคยกับ microbundle และการตั้งค่านี้เมื่อเทียบกับ webpack หรือ vite จะขอบคุณมากหากมีใครช่วยได้!