【Day 10】ブログ一覧を取得し、表示する - E2E & Unit テスト準備

## はじめに

![スライド11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/ed812311-bdd0-5df7-5cf8-e9176e86f9cc.png)

---

**2023年アドベントカレンダー10日目**です。

https://qiita.com/advent-calendar/2023/life-sync-app

前回は「ユーザーはトップページで固定値のブログタイトルを見ることができる」のストーリーを進めました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/4b26c455-b5e3-02c0-a12c-98f8d7ebd164.png)

今回から「ユーザーはトップページでブログの一覧を見ることができる」を進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/272b7c0a-ca22-3db9-acc8-f52a2dd4a280.png)

**Web**部分の開発を進めます。

## 画面デザイン

以前Figmaで作成したデザインで進めていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/9d06565b-6d5d-b784-4373-cab42fb5d6ee.png)

今回は前回コンポーネント設計をした、`Blogs`コンポーネントを作成していくイメージを持っておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/3434b50c-fb98-082b-64ee-41e8d3ea1fec.png)

## E2Eテスト

前回同様、まずはE2Eテストを書いていきます。

今回はブログのタイトルと、作成日時が見えていることが確認できるテストを追加しようと思います。
Figmaのデザインに書かれているデータをBFFから取得できているかを確認していこうと思います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/8f108381-fdba-9b6d-3956-4b24379db53b.png)

```diff_javascript:top/display.cy.js
/// <reference types="cypress" />

describe('トップ画面の表示', () => {
  beforeEach(() => {
    cy.visit(cy.config('baseUrl'))
  })

  it('h1タグで"Life Sync"が表示されていること', () => {
    cy.get('h1').should('have.text', 'Life Sync')
  })

  it('h2タグで"ブログ一覧"の文字が表示されていること', () => {
    cy.get('h2').should('have.text', 'ブログ一覧')
  })

  it('"新規登作成"のボタンが表示されていること', () => {
    cy.get('button').should('have.text', '新規作成')
  })

  it('ブログのタイトルが表示されていること', () => {
-   cy.get('.blog-card').eq(0).should('include.text', 'タイトル')
+   cy.get('.blog-card')
+     .eq(0)
+     .should('include.text', '心地よい一時：お気に入りのカフェでのひととき')
+   cy.get('.blog-card')
+     .eq(1)
+     .should(
+       'include.text',
+       'カフェの隅で見つけた幸せ：私のお気に入りの隠れ家'
+     )
+   cy.get('.blog-card')
+     .eq(2)
+     .should(
+       'include.text',
+       'コーヒーと共に過ごす静かな時間：愛すべきカフェでの体験'
+     )
+ })
+
+ it('ブログの日付が表示されていること', () => {
-   cy.get('.blog-card').eq(0).should('include.text', '2021/01/01 09:00:00')
+   cy.get('.blog-card').eq(0).should('include.text', '2023/12/01 09:00:00')
+   cy.get('.blog-card').eq(1).should('include.text', '2023/12/02 09:00:00')
+   cy.get('.blog-card').eq(2).should('include.text', '2023/12/03 09:00:00')
+ })
})
```

実行してみます。

```bash
  トップ画面の表示
    1) h1タグで"Life Sync"が表示されていること
    2) h2タグで"ブログ一覧"の文字が表示されていること
    3) "新規登作成"のボタンが表示されていること
    4) ブログのタイトルが表示されていること
    5) ブログの日付が表示されていること


  3 passing
  2 failing
```

:ok: 追加したテストが失敗することが確認できました

## Unitテスト準備

ユニットテストにはJestを採用しようと思います。

### Jest

https://jestjs.io/ja/

### Install

公式のリファクタリングをもとに進めていきます。

```bash
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```

```javascript:jest.config.mjs
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
  testEnvironment: 'jest-environment-jsdom',
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)
```

:ok: これで設定完了です！

次回はクリーンアーキテクチャの思想に基づいて開発を進めていきます。