はじめに

最近テストの重要性を感じて、特にE2Eテストを導入したいなーって思ってました。

そこで、Cypressを使って実際にプロジェクト作りながら学んでみることにしました！

プロジェクト概要

• Docker Composeで構築
• フロントエンドはRemix、バックエンドはGoで実装
• PostgreSQLを使用
• Nginxをリバースプロキシとして設定
• Cypressを使ってE2Eテストを実装
• GitHub ActionsでCI/CDを設定

やりたいこと

• APIテスト
• E2Eテスト
• ビジュアルテスト
• GitHub Actionsで自動テスト

さっそく始めよう！

今回はシンプルなブログアプリを作ってみます。

APIのエンドポイントはこんな感じ：

ヘルスチェック: GET /api/health

ユーザーログイン: POST /api/user/signin

ユーザー登録: POST /api/user/signup

記事を取得: GET /api/posts/user

記事を作成: POST /api/post

フロントはRemixで、ログインと記事一覧ページを作ってみました。

テストやってみよう！

今回のメインイベント、Cypressをインストールします！

npm install cypress --save-dev

次に、Cypressの初期設定をやります。

npx cypress open

これでCypressのGUIが開きます！

初回起動時にサンプルテストがいくつか生成されて、テストの雛形が用意されます。

好きなブラウザを選択できます、便利だね。

それでは、テストを書いていきましょう！

APIテスト

まずはAPIのヘルスチェックから。

describe("サーバーが動いてるかチェック", () => {

　　it("ステータス200が返ってくる", ()=> {

　　　cy.request("GET", "http://localhost/api/health")

　　　　.then((response)=> {

　　　　　expect(response.status).to.eq(200);

　　});

　});

});

いい感じ！！！

次は、ユーザーのログインAPIをテストしてみます。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/53166

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

フリーランスエンジニア大募集中！

現在、「WEBエンジニア」「フロントエンジニア」「データサイエンティスト」など、様々な職種のフリーランスエンジニア様を募集中です。まずは以下よりお気軽にご応募ください！

採用ページはこちら：https://itanken.com/register

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

Wantedly：https://www.wantedly.com/companies/rightcode

コーポレート：https://rightcode.co.jp/