React 테스트 자동화 w. Vitest & Testing Library & MSW & Cypress

1
export function add() {}

1
2
3
4
5
6
7
import { add } from '../add'

describe('add', () => {
  test('1 더하기 2는 3이 돼야 합니다.', () => {
    expect(add(1, 2)).toBe(3)
  })
})

1
2
3
export function add(a: number, b: number) {
  return a + b
}

1
export const add = (a: number, b: number): number => a + b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { add } from '../add'

describe('add', () => {
  test('1 더하기 2는 3이 돼야 합니다.', () => {
    // Given(Arrange, 준비)
    const num1 = 1
    const num2 = 2

    // When(Act, 실행)
    const res = add(num1, num2)

    // Then(Assert, 검증)
    expect(res).toBe(3)
  })
})

1
npm i -D vitest jsdom @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom @types/jest

1
2
3
4
5
{
  "scripts": {
    "test": "vitest"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['setupTests.tsx']
  }
})

1
2
3
4
5
import { cleanup } from '@testing-library/react'

beforeEach(() => {
  cleanup()
})

1
2
3
export default function MovieList() {
  return <></>
}

1
2
3
4
5
6
7
8
9
10
11
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import MovieList from '@/components/MovieList'

describe('MovieList', () => {
  test('영화 목록을 출력해야 합니다.', async () => {
    render(<MovieList />)
    expect(screen.getByText('Avengers: Infinity War')).toBeInTheDocument()
    expect(screen.getByText('Avengers: Endgame')).toBeInTheDocument()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useState } from 'react'

export interface Movie {
  id: string
  title: string
}

export default function MovieList() {
  const [movies] = useState<Movie[]>([
    { id: '1', title: 'Avengers: Infinity War' },
    { id: '2', title: 'Avengers: Endgame' }
  ])

  return (
    <>
      <h2>Movie List!</h2>
      {movies.map(movie => (
        <div key={movie.id}>{movie.title}</div>
      ))}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { useEffect, useState } from 'react'

export interface Movie {
  id: string
  title: string
}

export default function MovieList() {
  const [movies, setMovies] = useState<Movie[]>([])

  useEffect(() => {
    fetchMovies()
  }, [])

  async function fetchMovies() {
    const movies = [
      { id: '1', title: 'Avengers: Infinity War' },
      { id: '2', title: 'Avengers: Endgame' }
    ]
    setMovies(movies)
  }

  return (
    <>
      <h2>Movie List!</h2>
      {movies.map(movie => (
        <div key={movie.id}>{movie.title}</div>
      ))}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { render, screen, act } from '@testing-library/react'
import '@testing-library/jest-dom'
import MovieList from '@/components/MovieList'

describe('MovieList', () => {
  test('영화 정보를 출력해야 합니다.', async () => {
    // render(<MovieList />)
    await act(async () => {
      render(<MovieList />)
    })
    expect(screen.getByText('Avengers: Infinity War')).toBeInTheDocument()
    expect(screen.getByText('Avengers: Endgame')).toBeInTheDocument()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { useEffect, useState } from 'react'

export interface Movie {
  imdbID: string
  Title: string
}

export default function MovieList() {
  const [movies, setMovies] = useState<Movie[]>([])

  useEffect(() => {
    fetchMovies()
  }, [])

  async function fetchMovies() {
    const res = await fetch('https://omdbapi.com/?apikey=7035c60c&s=avengers')
    const { Search: movies } = await res.json()
    setMovies(movies)
  }

  return (
    <>
      <h2>Movie List!</h2>
      {movies.map(movie => (
        <div key={movie.imdbID}>{movie.Title}</div>
      ))}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
export interface Movie {
  imdbID: string
  Title: string
}

export async function fetchMovies(title: string): Promise<Movie[]> {
  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&s=${title}`)
  const { Search } = await res.json()
  return Search
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useEffect, useState } from 'react'
import { fetchMovies } from '@/fetchers/movie'
import type { Movie } from '@/fetchers/movie'

export default function MovieList() {
  const [movies, setMovies] = useState<Movie[]>([])

  useEffect(() => {
    fetchMovies('avengers').then(setMovies)
  }, [])

  return (
    <>
      <h2>Movie List!</h2>
      {movies.map(movie => (
        <div key={movie.imdbID}>{movie.Title}</div>
      ))}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { vi } from 'vitest'
import { render, screen, act } from '@testing-library/react'
import '@testing-library/jest-dom'
import MovieList from '@/components/MovieList'
import * as movie from '@/fetchers/movie'

vi.mock('@/fetchers/movie') // 모듈 모의 작업
const mockedMovie = vi.mocked(movie) // 실제 모듈의 타입에 맞게 모의 모듈 반환

describe('MovieList', () => {
  test('영화 정보를 출력해야 합니다.', async () => {
    // fetchMovies 함수 모의 작업
    mockedMovie.fetchMovies.mockResolvedValue([
      { imdbID: '1', Title: 'Avengers: Infinity War' },
      { imdbID: '2', Title: 'Avengers: Endgame' }
    ])
    await act(async () => {
      render(<MovieList />)
    })
    expect(screen.getByText('Avengers: Infinity War')).toBeInTheDocument()
    expect(screen.getByText('Avengers: Endgame')).toBeInTheDocument()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { vi } from 'vitest'
import { render, screen, act } from '@testing-library/react'
import '@testing-library/jest-dom'
import MovieList from '@/components/MovieList'

describe('MovieList', () => {
  test('영화 정보를 출력해야 합니다.', async () => {
    await act(async () => {
      render(<MovieList />)
    })
    await vi.waitFor(() => {
      expect(screen.getByText('Avengers: Infinity War')).toBeInTheDocument()
      expect(screen.getByText('Avengers: Endgame')).toBeInTheDocument()
    })
  })
})

1
npm i -D msw

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { render, screen, act } from '@testing-library/react'
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
import MovieList from '@/components/MovieList'

describe('MovieList', () => {
  const server = setupServer() // 서버 생성
  beforeAll(() => server.listen()) // 모든 테스트 전에 서버 시작
  afterEach(() => server.resetHandlers()) // 각 테스트 후에 핸들러 재설정
  afterAll(() => server.close()) // 모든 테스트 후에 서버 종료

  test('영화 정보를 출력해야 합니다.', async () => {
    // OMDB API 응답 모의 작업
    const response = {
      Response: 'True',
      Search: [
        { imdbID: '1', Title: 'Avengers: Infinity War' },
        { imdbID: '2', Title: 'Avengers: Endgame' }
      ],
      totalResults: 2
    }
    server.use(
      http.get('https://omdbapi.com/', () => {
        return HttpResponse.json(response)
      })
    )
    await act(async () => {
      render(<MovieList />)
    })
    // expect(screen.getByText('Avengers: Infinity War').toBeInTheDocument()
    // expect(screen.getByText('Avengers: Endgame')).toBeInTheDocument()
    expect(screen.getByText(response.Search[0].Title)).toBeInTheDocument()
    expect(screen.getByText(response.Search[1].Title)).toBeInTheDocument()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { http, HttpResponse } from 'msw' 
import { setupServer } from 'msw/node'
import { fetchMovies } from '@/fetchers/movie'

describe('fetchMovies', () => {
  const server = setupServer()
  beforeAll(() => server.listen())
  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())

  test('영화를 성공적으로 가져옵니다.', async () => {
    const response = {
      Response: 'True',
      Search: [
        { imdbID: '1', Title: 'Avengers: Infinity War' },
        { imdbID: '2', Title: 'Avengers: Endgame' }
      ],
      totalResults: 2
    }
    server.use(
      http.get('https://omdbapi.com/', () => {
        return HttpResponse.json(response)
      })
    )

    const movies = await fetchMovies('avengers')
    expect(movies).toHaveLength(2)
    expect(movies[0]).toEqual(response.Search[0])
    expect(movies[1]).toEqual(response.Search[1])
  })

  test('영화를 가져오는데 실패합니다.', async () => {
    const response = {
      Error: 'Movie not found!',
      Response: 'False'
    }
    server.use(
      http.get('https://omdbapi.com/', () => {
        return HttpResponse.json(response)
      })
    )

    const movies = await fetchMovies('존재하지 않는 영화?!')
    expect(movies).toBeUndefined()
  })

  test('네트워크 오류가 발생합니다.', async () => {
    server.use(
      http.get('https://omdbapi.com/', () => {
        return HttpResponse.error()
      })
    )

    await expect(fetchMovies('avengers')).rejects.toThrow()
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useEffect, useState } from 'react'
import { fetchMovies } from '@/fetchers/movie'
import type { Movie } from '@/fetchers/movie'

export default function MovieList() {
  const [movies, setMovies] = useState<Movie[]>([])
  const [title, setTitle] = useState('')

  useEffect(() => {
    fetchMovies('avengers').then(setMovies)
  }, [])

  return (
    <>
      <h2>Movie List!</h2>
      <input
        type="text"
        value={title}
        placeholder="영화 제목을 입력하세요!"
        onChange={e => setTitle(e.target.value)}
        onKeyDown={e => e.key === 'Enter' && fetchMovies(title).then(setMovies)}
      />
      {movies.map(movie => (
        <div key={movie.imdbID}>{movie.Title}</div>
      ))}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { render, screen, act } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
import MovieList from '@/components/MovieList'

describe('MovieList', () => {
  // ...

  test('영화 제목을 입력하고 엔터키를 누르면, 영화 목록을 출력합니다.', async () => {
    const user = userEvent.setup()
    const response = {
      Response: 'True',
      Search: [
        { imdbID: '1', Title: 'Batman Begins' },
        { imdbID: '2', Title: 'The Batman' }
      ],
      totalResults: 2
    }
    let requestUrl = ''
    server.use(
      http.get('https://omdbapi.com/', ({ request }) => {
        requestUrl = request.url
        return HttpResponse.json(response)
      })
    )
    await act(async () => {
      render(<MovieList />)
    })

    const searchInput = screen.getByPlaceholderText('영화 제목을 입력하세요!')
    await user.type(searchInput, 'batman{Enter}')

    expect(requestUrl).toBe(`https://omdbapi.com/?apikey=7035c60c&s=batman`)
  })
})

1
npm i -D @vitest/coverage-v8

1
2
3
4
5
6
{
  "scripts": {
    "test": "vitest",
    "test:coverage": "vitest run --coverage"
  }
}

1
npm run test:coverage

1
npm i -D cypress

1
2
3
4
5
6
{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
describe('영화 목록 페이지', () => {
  beforeEach(() => {
    cy.visit('http://localhost:5173/')
  })

  it('페이지 접속 시 기본 영화 목록이 표시되어야 함.', () => {
    cy.wait(1000) // 영화 목록을 가져오기까지 1초 동안 기다림!
    cy.get('h2').should('contain', 'Movie List!') // <h2> 요소의 텍스트가 'Movie List!'이어야 함!
    cy.get('ul li').should('have.length.gt', 0) // <li> 요소가 1개 이상 있어야 함!
    cy.get('ul li').first().should('have.text', 'The Avengers') // 첫 번째 <li> 요소의 텍스트가 'The Avengers'이어야 함!
  })

  it('영화 제목 검색 시 해당 영화 목록이 표시되어야 함.', () => {
    cy.get('input[type="text"]').type('batman{Enter}') // 텍스트 입력 후 엔터키!
    cy.wait(1000)
    cy.get('ul li').should('have.length.gt', 0)
    cy.get('ul li').first().should('contain', 'Batman Begins')
  })
})

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:5173',
    viewportWidth: 1280,
    viewportHeight: 720,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    }
  }
})

1
2
3
4
5
6
7
describe('영화 목록 페이지', () => {
  beforeEach(() => {
    cy.visit('/') // '/about', '/movies' 등
  })

  // ...
})

1
2
3
4
5
6
7
8
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    video: true,
    // ...
  }
})

1
npm run cy:run

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# GitHub Action 이름 지정!
name: 테스트 실행!

# 이벤트 지정!
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

# 작업 지정!
jobs:
  test: # 작업 이름!
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v4
    - name: Node.js 설정
      uses: actions/setup-node@v4
      with:
        node-version: '20'
        cache: 'npm'
    - name: 의존성 설치
      run: npm ci
    - name: 단위 테스트 실행
      run: npm test
    - name: Cypress 테스트 실행
      uses: cypress-io/github-action@v5
      with:
        start: npm run dev
        wait-on: 'http://localhost:5173'
    - name: Cypress 스크린샷 업로드
      uses: actions/upload-artifact@v3
      if: failure()
      with:
        name: cypress-screenshots
        path: cypress/screenshots
    - name: Cypress 비디오 업로드
      uses: actions/upload-artifact@v3
      if: failure()
      with:
        name: cypress-videos
        path: cypress/videos