実務にすぐに適甚できるフロント゚ンドテスト - 1郚。テストの基瀎単䜓テスト・結合テスト

この講矩を通しお、フロント゚ンドテストの党䜓的な皮類を把握し、状況に合った適切なテストを遞択するこずで、信頌感のあるテストを䜜成する方法を孊びたす。

難易床 初玚

受講期間 無制限

Software Test
Software Test
JavaScript
JavaScript
React
React
vitest
vitest
Software Test
Software Test
JavaScript
JavaScript
React
React
vitest
vitest

孊習した受講者のレビュヌ

4.8

5.0

배렀깊은 칚팬지

72% 受講埌に䜜成

テストコヌドを組むべきです...考えるだけで本圓にしっかりしおみたくお講矩を聞くようになりたした。講矩内容もずおも良かったし、コヌドも提䟛しおくれおテストコヌドだけに集䞭できおよかったです。実務に適甚しおもいいずいう勇気ができたしたありがずう:)

5.0

Dongja

100% 受講埌に䜜成

テストが䜕なのか、䜕をテストするのか、どのようにテストするのかに぀いお倚くの方々が悩んでいるず思いたす。この講矩を聞くず、テストに初めお接する方も簡単に぀いおいただけるようです。テストずは別に、サンプルプロゞェクトの蚭定を芋ながらも埗おいる郚分があっおよかった:) 良い講矩を䜜っおくれおありがずうパヌト2も頑匵りたす〜

5.0

컎공ㄷㄷ핎

100% 受講埌に䜜成

テストコヌドを曞くずきは、自分で玍埗が必芁な瞬間がありたす。 「テストにより開発日皋が抌されないのか」、「これをテストするのが正しいか」、「今埌倉曎される内容をテストすべきか」このレッスンでは、単にショッピングモヌルのサむトをどのように戊略的にテストできるかに぀いお、さたざたなテクニックを玹介しおいたす。映像を芋たら、自分で玍埗できるテストコヌドを自信を持っお䜜成できるず思いたす。倚くの方がこの映像を芋おテストに自信を埗おほしいです。

受講埌に埗られるこず

  • テスト䜜成に必芁な重芁抂念

  • 自分が曞いたコヌドの信頌性を高めるこずができるフロント゚ンドテストの䜜成方法

  • Vitestを掻甚したナニット・統合テストの䜜成方法

  • Testing Library、MSWなどのテストツヌルの䜿い方


🎊 むベント 🎊

第1郚30%クヌポンをお受け取りください

📌 リンク (77,000 -> 53,600円)

1. クヌポンの䜿甚方法は[受講カヌト → クヌポン遞択 → 利甚可胜クヌポン]で垌望するクヌポンをクリックしお䜿甚できたす。
2. クヌポンの登録方法は[受講カヌト → クヌポン遞択]、[ダッシュボヌド → クヌポンボックス]で保有しおいるクヌポンコヌドを入力するずクヌポンが発行されたす。

1郚の講矩を受講された方は、2郚50%割匕クヌポンをお受け取りください

1郚の講矩をすべお受講された方に、2郚の講矩を50%割匕䟡栌でより安く賌入できるクヌポンを共有しおいたす。䞋蚘の投皿にアクセスしお、賌入前にクヌポンをご利甚ください

📌 投皿リンクリンク
⚠ この投皿は1郚賌入者のみに衚瀺されたす。

孊生・就掻生の皆様に講座料金をサポヌトいたしたす 💪

収入のない孊生の方や就掻生の方が負担を感じないよう、フォヌムに入力しお提出しおいただければ50%割匕クヌポンを差し䞊げたす。申請リンクが開いおいれば申請可胜です。皆さんの孊習を応揎しおいたす。頑匵っおください🔥

📌 申蟌リンク: https://forms.gle/ohs7KywvSGXoJXGM7
⚠ FEの勉匷を始めたばかりの方には少し難しいトピックかもしれたせん。前提知識を必ず確認しおから受講しおください


こんな悩みを抱えおいたせんか🀔

フロント゚ンドテストは
䜕を怜蚌するのか
気になりたす

手でデバむスから
盎接行うテストは
ずおも反埩的で倧倉です

実務で䜜成する
本圓のフロント゚ンドテストが
気になりたす

フロント゚ンドテストの様々なタむプを孊習し、実際の事䟋に近い䟋題を䜿甚しおテストを䜜成したす

  • 🀔 アプリを䜜るこずにはある皋床慣れおきたけれど、実際にプロダクション環境でうたく動䜜するか䞍安でしたか
  • 🀔 テストが本圓に必芁だず蚀われおいるけれど、あたりにも倚様なフロント゚ンドテストがあっお始める気力が湧かなかったのではないでしょうか
  • 🀔 特定のテストタむプにこだわりながらより倚くのこずを怜蚌し自動化したいず思われたしたか
  • 🀔 どのようなテストを曞くべきか、テストの目的に぀いお敎理したかったのでしょうか

このような悩みをお持ちでしたら、よくいらっしゃいたした
「実務にすぐ適甚するフロント゚ンドテスト」を皆様におすすめしたす。

珟圹フロント゚ンド実務者たちが掚薊したあの講座

テストコヌドの必芁性から、様々な皮類のテスティング抂念ず掻甚方法をすべお孊ぶこずができる講矩です。ただテストに慣れおいない方は講矩を通しおテスティングの抂念をしっかりず身に぀けるこずができ、既にテストコヌドを曞いおいた方は講矩の䟋題ず実習でより効果的で意味のあるテストコヌドを習埗しお実務に適甚しおみるこずができたす。

- Kurly フロント゚ンド開発者 ナ・ギョンサン

テストコヌドを曞くずきには、自分自身を玍埗させる必芁がある瞬間がありたす。「テストによっお開発スケゞュヌルが遅れるのではないか」「これをテストするのが正しいのか」「今埌倉曎される内容をテストすべきなのか」

この講矩は、単玔なショッピングモヌルサむトをどれほど戊略的にテストできるかを、様々な技法を甚いお瀺しおいたす。動画を党お芋終えた埌は、自分で玍埗できるテストコヌドを自信を持っお曞けるようになるず思いたす。倚くの方がこの動画をご芧になっお、テストに自信を埗られるこずを願っおいたす。

- LINE Plus フロント゚ンド開発者 む・サンチョル

「なぜテストコヌドを曞く必芁があるのか」から「どのように曞くべきか」たで、実務で䜿えそうな䟋題をベヌスに栞心を抌さえた講矩です。テストコヌドは信頌性のあるアプリケヌションのために必ず必芁な郚分ですが、䜕をどのようにテストするかい぀も悩みが倚かったず思うのですが、その基準ず方法をきれいに敎理しお説明しおくれお、ずおも圹に立ちたした。

- LINE Plus フロント゚ンド開発者 キム・りンビン

この講矩を通じお様々なフロント゚ンドテストの目的を理解し、完成床の高い堅実なアプリを制䜜しおみたしょう。😍


様々なフロント゚ンドテストを
䞀床に孊習するのに最適な講座🚀

この講矩では1郚/2郚にわたっお単䜓、統合、スナップショット、ビゞュアル回垰、E2Eテストを実務に近いプロゞェクトを䜿っお簡単か぀迅速に習埗したす。各テストの長所ず限界を理解し、テストの目的を明確に理解しお自分だけのワヌクフロヌを構築できる胜力を身に぀けたす。

講矩の栞心ポむント

重芁な抂念から䞀歩ず぀

テストの必芁性ず共通しお知っおおくべきテスト䜜成ルヌルず抂念に぀いお説明したす。

初めお接する抂念があっおも

各ツヌルずAPIをなぜ䜿甚するのか目的を明確に䌝え、各テストタむプの定矩ず察象を遞定する方法を䞁寧に芋おいきたす。

自ら孊習しおいけるように

孊習した内容をベヌスにテストを盎接䜜成できる䟋題ず正解を䞀緒に提䟛し、効果的なテスト孊習をサポヌトしたす。

実務ず同様に

実際のサヌバヌ環境ず通信するショッピングモヌルの䟋を基にテストを䜜成し、文法ずツヌルを孊習しお実務でも簡単に適甚できるよう䟋題プロゞェクトを提䟛したす。


第1郚は党郚で5぀のセクションで
構成されおいたす📚

セクション 1
フロント゚ンドテスト䜜成の準備

  • テストずは䜕かを確認し、テストコヌドを䜜成した際の効果を芋おみたす。
  • フロント゚ンドテストを䜜成する際に、正しいテストを䜜成するルヌルを芋おいきたす。
  • これから䜿甚する予定のサンプルプロゞェクトの機胜に぀いお玹介したす。

セクション2
単䜓テストずは

  • 単䜓テストの抂念ず目的に぀いお説明したす。
  • 単䜓テストを䜜成する際に怜蚌すべき内容に぀いお説明したす。
  • テストフレヌムワヌクVitestに぀いお玹介し、サンプルコヌドを基にナニットテストを䜜成したす。
  • この過皋でマッチャヌMatcherずアサヌションAssertion、it、setup、teardownなどテスト䜜成に必芁な文法を芋おいきたす。
  • コンポヌネントテストを支揎するツヌルTesting Libraryに぀いお芋おいきたす。

セクション 3
単䜓テストの䜜成

  • ショッピングモヌルの䟋を基に単䜓テストの察象ずしお遞定する基準を芋おいきたす。
  • モッキングMockingずモッキング初期化方法に぀いお確認し、独立したテストの䜜成方法に぀いお芋おいきたす。
  • Reactフックずよく出䌚うタむマヌを察象にテストを䜜成する方法を孊び、act関数ずReact Testing Libraryをうたく掻甚する方法ず泚意点に぀いお芋おいきたす。
  • 単䜓テストの限界に぀いお芋おいきたす。

セクション 4
統合テストずは

  • 統合テストの抂念ず目的に぀いお説明したす。
  • ショッピングモヌルの䟋を基に統合テストの察象ずしお遞定する基準を芋おみたす。
  • 状態管理ラむブラリをモックする方法ずMSWを掻甚したAPIモック方法に぀いお芋おいきたす。
  • ショッピングモヌルの䟋を基に単䜓テストの察象ずしお遞定する基準を芋おいきたす。
  • React Testing Libraryの非同期ナヌティル関数を掻甚する方法を芋おいきたす。

セクション 5
統合テストの䜜成

  • ショッピングモヌルの䟋を基にした統合テストを䜜成しおみたす。
  • 統合テストの限界に぀いお孊びたす。
  • GitHub Actionsを掻甚しおテストを自動化する方法を芋おいきたす。

関連講矩

実務にすぐ適甚するフロント゚ンドテスト

2郚: テスト深化 - ビゞュアル回垰 · E2Eテスト
リンク: https://inf.run/DRRLB


Q&A 💬

Q. Windows / macOS関係なく受講できたすか

はい、可胜です。授業はmacOSで進行され、VSCodeずブラりザGoogle Chrome環境で進行されたす。

Q. 孊習資料はどこで受け取るこずができたすか

講矩資料は講矩に含たれおおり、サンプルコヌドはGitHubを参考しおください。

Q. 講矩を受講する前に知っおおくべき知識はありたすか

JavaScriptES6ずReactに関する基瀎知識が必芁です。この講矩はテストに぀いお話すため、プロゞェクトを進めおいく技術に぀いおの玹介は簡単に行いたすが、具䜓的な䜿甚法は盎接孊習しおいただく必芁がありたす。難しくないレベルで䜿甚しおいるので、䜿甚技術を孊習しながらゆっくり぀いおきおいただいおも十分にやり遂げるこずができたす。

Q. 順序に関係なく、垌望するセクションを先に受講しおも倧䞈倫ですか

この講矩は順次的にテストの抂念ず各テストの䜜成方法、限界を説明し、限界を克服する新しいテスト方法を玹介しおいたす。そのため、前のセクションから順次的に孊習されるこずをお勧めしたす。

Q. 1郚ず2郚は続きの講矩でしょうか

はい。講矩は同じサンプルプロゞェクトで進行され、1郚で玹介した内容は2郚で再床玹介したせん。可胜でしたら1郚、2郚を䞀緒に孊習されるこずをお勧めしたす。

こんな方に
おすすめです

孊習察象は
誰でしょう

  • テストを通じお、自分が䜜成したコヌドに自信を持ちたい方

  • テストを通じお手䜜業による反埩的な怜蚌を自動化したい方

  • 普段フロント゚ンドテストが䜕を怜蚌するものなのか疑問に思っおいた方

  • 様々なフロント゚ンドテストのタむプを䞀床に孊習し、適切に溶け蟌んだワヌクフロヌを構築したい方

前提知識、
必芁でしょうか

  • JavaScript

  • CSS・HTML

  • React

こんにちは
hanjungvです。

1,740

受講生

118

受講レビュヌ

73

回答

4.9

講座評䟡

2

講座

コヌドゞョヌカヌ

◩ 基瀎から完成たで、フロント゚ンド開発からテストたで、理論ず䟋題で孊ぶフロント゚ンド 著者
◩ 12幎目のフロント゚ンド開発者
◩ (珟) グロヌバルコンテンツ䌁業 FE開発郚門 チヌム長
◩ (前) NHN TOAST Cloud FE開発チヌム長
◩ (前) サムスンSDS FE開発者

オフ

◩ 基瀎から完成たで、フロント゚ンド開発からテストたで、理論ず䟋題で孊ぶフロント゚ンド 著者
◩ 8幎目フロント゚ンド開発者
◩ (珟) グロヌバルメッセンゞャヌ䌁業 FE開発者
◩ (前) NHN TOAST UI オヌプン゜ヌス開発者

もっず芋る

カリキュラム

党䜓

25件 ∙ (4時間 42分)

講座資料こうぎしりょう:

授業資料
講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

91ä»¶

4.8

91件の受講レビュヌ

  • gloriousrsk3277님의 프로필 읎믞지
    gloriousrsk3277

    受講レビュヌ 5

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    実務にすぐに適甚できるほど良いクオリティの䟋コヌドで孊ぶこずができおずおも良かったです

    • hanjungv
      知識共有者

      講矩で登堎しないコヌドも必ず䞀緒に芋お勉匷しおみるずもっず倧きな助けになるでしょう。 ぜひ頑匵っお実務に適甚された内容 共有しおくださった内容も聞いおいただければ幞いですね明けたしおおめでずう〜

  • 1ilsang0174님의 프로필 읎믞지
    1ilsang0174

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    テストコヌドを曞くずきは、自分で玍埗が必芁な瞬間がありたす。 「テストにより開発日皋が抌されないのか」、「これをテストするのが正しいか」、「今埌倉曎される内容をテストすべきか」このレッスンでは、単にショッピングモヌルのサむトをどのように戊略的にテストできるかに぀いお、さたざたなテクニックを玹介しおいたす。映像を芋たら、自分で玍埗できるテストコヌドを自信を持っお䜜成できるず思いたす。倚くの方がこの映像を芋おテストに自信を埗おほしいです。

    • doooni님의 프로필 읎믞지
      doooni

      受講レビュヌ 3

      ∙

      平均評䟡 5.0

      5

      72% 受講埌に䜜成

      テストコヌドを組むべきです...考えるだけで本圓にしっかりしおみたくお講矩を聞くようになりたした。講矩内容もずおも良かったし、コヌドも提䟛しおくれおテストコヌドだけに集䞭できおよかったです。実務に適甚しおもいいずいう勇気ができたしたありがずう:)

      • hanjungv
        知識共有者

        良い評䟡ありがずうございたす適甚しおも難しい郚分ありたしたら、お気軜にご質問ください

    • jdh9811181606님의 프로필 읎믞지
      jdh9811181606

      受講レビュヌ 2

      ∙

      平均評䟡 5.0

      5

      100% 受講埌に䜜成

      テストが䜕なのか、䜕をテストするのか、どのようにテストするのかに぀いお倚くの方々が悩んでいるず思いたす。この講矩を聞くず、テストに初めお接する方も簡単に぀いおいただけるようです。テストずは別に、サンプルプロゞェクトの蚭定を芋ながらも埗おいる郚分があっおよかった:) 良い講矩を䜜っおくれおありがずうパヌト2も頑匵りたす〜

      • hanjungv
        知識共有者

        講矩をうたく掻甚しおくれるようですね 2郚たでぜひ頑匵っお実務に適甚された内容 共有しおくださった内容も聞いおいただければ幞いですね 明けたしおおめでずう〜

    • wqer23님의 프로필 읎믞지
      wqer23

      受講レビュヌ 2

      ∙

      平均評䟡 3.0

      修正枈み

      2

      64% 受講埌に䜜成

      提䟛される資料の䟝存性バヌゞョンが党おdeprecatedされたレベル 叀いバヌゞョンが提䟛されるが、該圓資料を䜿甚する堎合 䟿利機胜の䜿甚は困難。 修正したずしおも他のプロゞェクトでvitestを䜿う堎合、プロゞェクトを倉曎しお䜿うたびにvitestバヌゞョンも倉曎しなければならない。 説明ずいうより機胜が曞かれた文章をそのたた読んでいるような感じ。 講矩を芋お理解する時間より公匏ドキュメントを芋お理解する時間、たたは 該圓モゞュヌルの原本、コア郚分のコメントを芋お理解する時間が圧倒的に長かったが、講矩をなぜ芋る必芁があるのかずいう疑問が生じる。 ただし方向性の提瀺はしおくれるずいう点がそれなりの長所。 もしInflearnの倧倚数の講矩がこのような状況であれば、Inflearn党䜓の問題だず思われる。

      䌌おいる講座

      同じ分野の他の講座を芋おみたしょう