config : cypress 셋팅

.eslintrc.json

@@ -17,7 +17,8 @@
  "next/core-web-vitals",
  "plugin:prettier/recommended",
  "plugin:jest-dom/recommended",
- "plugin:testing-library/react"
+ "plugin:testing-library/react",
+ "plugin:cypress/recommended"
  ],
  "rules": {
  "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],

cypress.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+ e2e: {
+ setupNodeEvents(on, config) {
+ return {
+ browser: {
+ name: 'chrome',
+ family: 'chromium',
+ channel: 'stable',
+ displayName: 'Chrome',
+ versionRegex: /Google Chrome (\S+)/m,
+ binary: ['google-chrome', 'chrome', 'google-chrome-stable']
+ }
+ }
+ },
+ specPattern: 'src/tests/e2e/**/*.cy.ts',
+ supportFile: 'src/tests/e2e/support/commands.ts',
+ fixturesFolder: 'src/tests/e2e/'
+ }
+})

jest.config.ts

@@ -39,7 +39,9 @@ const config: Config.InitialOptions = {
 
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
 
- setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
+ setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+
+ testPathIgnorePatterns: ['<rootDir>/src/tests/e2e']
 }
 
 export default config

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -10,6 +10,7 @@
  "storybook": "storybook dev -s public -p 6006",
  "build-storybook": "storybook build",
  "test": "jest --env=jsdom",
+ "cypress": "cypress open",
  "prettier": "prettier '**/*.{json,js,jsx,ts,tsx}' --write",
  "prepare": "husky install",
  "stylelint": "stylelint './src/**/*.{js,jsx,ts,tsx}' --fix"
@@ -51,10 +52,12 @@
  "@typescript-eslint/parser": "^5.32.0",
  "babel-jest": "^29.6.2",
  "babel-loader": "^8.2.5",
+ "cypress": "^13.3.0",
  "eslint": "8.21.0",
  "eslint-config-next": "^13.4.8",
  "eslint-config-prettier": "^8.5.0",
  "eslint-import-resolver-typescript": "^3.5.2",
+ "eslint-plugin-cypress": "^2.15.1",
  "eslint-plugin-import": "^2.26.0",
  "eslint-plugin-jest-dom": "^4.0.3",
  "eslint-plugin-prettier": "^4.2.1",

src/components/home/CategorySlider/index.tsx

@@ -138,6 +138,7 @@ const CategorySlider = (): ReactElement => {
  <Styled.CateGoryWrapper>
  <Styled.CateGoryBox
  ref={containerRef}
+ data-test-id="category_scroll_area"
  onMouseUp={onDragEnd}
  onTouchEnd={onDragEnd}
  onTouchMove={isDrag ? onDragMove : undefined}

src/components/home/ProductList/styled.ts

@@ -17,30 +17,22 @@ const NewProductTitle = styled.div`
 const ProductListWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
- row-gap: 31px;
-
- column-gap: 28px;
+ gap: 31px 28px;
  ${({ theme }): string => theme.mediaQuery.tablet} {
  grid-template-columns: repeat(4, minmax(10%, 166px));
- row-gap: 18px;
+ gap: 18px 20px;
  justify-content: center;
-
- column-gap: 20px;
  }
  ${({ theme }): string => theme.mediaQuery.mobile} {
  grid-template-columns: repeat(2, minmax(30%, 200px));
- row-gap: 15px;
+ gap: 15px 50px;
  justify-content: center;
-
- column-gap: 50px;
  }
 
  @media (width <= 510px) {
  grid-template-columns: repeat(2, minmax(10%, 160px));
- row-gap: 8px;
+ gap: 8px 20px;
  justify-content: center;
-
- column-gap: 20px;
  }
 `
 

src/components/mypage/ReviewModal/styled.ts

@@ -93,8 +93,7 @@ const ReviewState = styled.button<StyledReviewStateProps>`
  display: flex;
  flex-direction: column;
  gap: 4px;
- align-items: center;
- justify-items: center;
+ place-items: center center;
 
  border: none;
 

src/hooks/result/useCategoryFilterList.ts

@@ -14,7 +14,7 @@ type ReturnType = {
  onCheckItem(name: string): void
 }
 
-const cateGoryList = [
+export const cateGoryList = [
  {
  code: '전체',
  name: '전체',

src/tests/e2e/feature/main/fixtures/apiName.json

@@ -0,0 +1 @@
+{}

src/tests/e2e/feature/main/main.cy.ts

@@ -0,0 +1,34 @@
+import { cateGoryList } from '@hooks/result/useCategoryFilterList'
+
+const visitMainPage = (): void => {
+ const URL = 'http://localhost:3000'
+ cy.visit(URL)
+}
+
+describe('첫 진입 페이지 ', () => {
+ beforeEach(() => {
+ visitMainPage()
+ })
+ it('배너의 텍스트가 보인다.', () => {
+ cy.contains('처치곤란한 물건이 있다면?').should('be.visible')
+ })
+
+ it('카테고리 들이 보인다', () => {
+ cateGoryList.forEach(category => {
+ if (category.name == '전체' || category.name === '반려동물') {
+ return
+ }
+ cy.contains(category.name).should('be.visible')
+ })
+ })
+
+ it('카테고리를 오른쪽으로 끝까지 하면 더보기 카테고리가 보인다', () => {
+ cy.get('[data-test-id="category_scroll_area"]').scrollTo('right')
+ cy.contains('더보기').should('be.visible')
+ })
+
+ it('페이지를 아래로 내리면 상품이 보인다', () => {
+ cy.scrollTo(0, 1000)
+ cy.contains('시작가').should('be.visible')
+ })
+})

src/tests/e2e/support/commands.ts

@@ -0,0 +1,2 @@
+export {}
+/// <reference types="cypress" />

src/tests/e2e/support/e2e.ts

@@ -0,0 +1 @@
+import './commands'

src/tests/e2e/tsconfig.json

@@ -0,0 +1,8 @@
+{
+ "extends": "../../../tsconfig.json",
+ "compilerOptions": {
+ "noEmit": true,
+ "types": ["cypress"]
+ },
+ "include": ["../node_modules/cypress", "./**/*.ts"]
+}

tsconfig.json

@@ -16,18 +16,13 @@
  "jsx": "preserve",
  "incremental": true,
  "strictNullChecks": true,
+ "types": ["cypress"],
  "plugins": [
  {
  "name": "next"
  }
  ]
  },
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- "jest.config.js",
- ".next/types/**/*.ts"
- ],
- "exclude": ["node_modules"]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules", "cypress.config.ts"]
 }