Don't Skip Testing: How to Start Testing React Components

Discover the importance of testing in software development and how it can give you confidence that your application won't break. We'll talk about how to approach testing and write a few tests within React and RedwoodJS
👉 Chapters
0:00 Introduction
1:06 Building and Styling a Navigation Bar in Redwood JS
3:48 Running Storybook for Component Preview
4:08 Styling the Navigation Bar with Tailwind
8:17 Creating Animation for Navigation Visibility
9:11 Setting Up Storybook for Testing Scroll Behavior
10:53 Writing Tests for the Navigation Component
12:20 Importance of Testing Components as Users Interact
13:01 Examining the Generated Test File
13:46 Writing Individual Component Tests
15:10 Creating a Test Plan for Navigation Links
16:00 Grouping Tests Based on Authentication Status
17:11 Writing Specific Tests for Navigation Links
18:20 Setting Up Assertions for Navigation Tests
20:53 Finalizing the Test Suite for Navigation Component
⚡ Quick Links
- Code on GitHub: github.com/ahaywood/brazilian...
- Figma File: www.figma.com/file/z6Vipsmnua...
📹 Other videos in the series:
- Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - • Intro - Master the Ful...
- Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - • Setup Your Redwood.js ...
- Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - • RedwoodJS File and Fol...
- Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - • Maximize Efficiency: B...
- Part 5: Mastering the Redwood Router: A Comprehensive Overview - • Mastering the Redwood ...
- Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - • Easy Tailwind Setup: C...
- Part 7: Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing - • Getting Started with S...
👉 Part 8: THIS VIDEO 👈
🔗 Links
- RedwoodJS: redwoodjs.com/
- RedwoodJS Documentation: redwoodjs.com/docs/introduction
- RUclips Video on Redwood Router - • Mastering the Redwood ...
- RedwoodJS Documentation for working with the Router - redwoodjs.com/docs/router#rou...
- RedwoodJS Documentation for Testing - redwoodjs.com/docs/testing#in...

[@vinassefranche]

Nice video! If I'm not wrong, you manage to have the casing kept when replacing home/Home by signup/Signup. What wizardy is this? I want it too! :-)

[@SelfTeachMe]

YES! It's this lovely extension: Multiple Cursor Case Preserve: marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

[@vinassefranche]

@@SelfTeachMe so great! Thanks a lot!

[@nuxbot919]

When I discovered your channel I told you that I hope you'd never stop making videos and you stop for a year 😂.
Glad I kept this channel around, you are awesome 😊

[@SelfTeachMe]

Glad you stuck around too! ... and so glad to be back 😊

[@marekkabala5349]

Great video🎉. There are not many videos on YT where someone makes a component and immediately explains superbly how to write tests. I've never written one😢. Maybe because I do it all as a hobby and it has always been too much work for me to write one. But when you explain it, it seems simple.

[@SelfTeachMe]

This is one of the best comments I've ever gotten 🥰 Thank you! ... And glad you found the video the video helpful!

[@codingm7002]

This was such a helpful video, thank you! Love your helpful assistant btw 😄

[@SelfTeachMe]

Ha ha! Your comment made him so happy. 😊

[@TK-uo7cb]

Love your work. Thanks !

[@SelfTeachMe]

You're too kind! ... Thanks for watching!

[@ManWhoLostTheWar]

absolutely love this video, ive always had trouble making my react components look nice and ive used this video and its incredible
another amazing and helpful video as usual amy :)

[@SelfTeachMe]

Oh yeah!! ... So glad to hear that!