React + Rails + AWS Fargate の構成を実現したい - 04 フロントエンドのテスト整備編

目次

• 概要
• 本記事のゴール
• 成果
• 作業メモ
  • 1. テストコード
  • 2. docker実行コマンド簡素化

概要

本記事のゴール

以下を参考にフロントエンドのテスト整備を行う。

成果

以下のように、フロントエンドのテストができる状態にできた。

npm run test

> src@0.1.0 test
> jest

info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
 PASS  __tests__/index.test.jsx
  Home
    ✓ renders a heading (103 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.261 s
Ran all test suites.

作業メモ

1. テストコード

画面上の表示文字列がSample Next.js Appと一致していることを確認するテストコード

/frontend/src/__tests__/index.test.jsx

import { render, screen } from '@testing-library/react'
import Home from './../pages/index'

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /Sample Next.js App/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

2. docker実行コマンド簡素化

Makefileに以下を追加し、コンテナに入るコマンドを簡素化

du:
	docker-compose up -d --build
+ df:
+ 	docker-compose run --rm frontend /bin/bash
+ db:
+ 	docker-compose run --rm backend /bin/bash
dd:
	docker-compose down