lil.dev
Published on

๐Ÿ’– ๊ฐœ๋ฐœํŒ - `cypress` ์„ค์น˜ํ•˜๊ธฐ

๊ธ€์“ด์ด

    ๐Ÿ“Œ ๋ชฉ์ฐจ

    Welcome

    cypress ์„ค์น˜ํ•˜๊ธฐ

    bun add cypress -d๋กœ ์„ค์น˜ํ•œ ํ›„ bun run cypress install๋กœ ํ•œ๋ฒˆ ๋” ์„ค์น˜ํ•ด์ค€๋‹ค.

    ๊ทธ๋‹ค์Œ bun run cypress open๋ฅผ ํ•ด์„œ cypress๋ฅผ ์—ด์–ด์ค€๋‹ค.

    tsx๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” tsconfig.json์™€ tsconfig.node.json๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

    tsconfig.json

    {
      "include": ["**/*.ts", "**/*.tsx"],
      "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "baseUrl": ".",
        "types": ["cypress", "@testing-library/cypress"],
        "paths": {
          "~/*": ["./src/*"]
        }
      },
      "references": [{ "path": "./tsconfig.node.json" }]
    }
    

    tsconfig.node.json

    {
      "compilerOptions": {
        "composite": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "rootDir": "..",
        "types": ["cypress", "@testing-library/cypress"]
      },
      "include": ["vite.config.ts"]
    }
    

    ๊ทธ๋ฆฌ๊ณ  ์žฅ์• ์ธ๊ณผ ์•ฝ์ž๋“ค์„ ์œ„ํ•œ ํ…Œ์ŠคํŠธ๊นŒ์ง€ ์งค ์ˆ˜ ์žˆ๋Š” library๋„ ์„ค์น˜ํ•ด์ฃผ์—ˆ๋‹ค. bun add -d @testing-library/cypress bun add -d @types/testing-library__cypress