Snapshot Tests: Pros, Cons and Best Use Cases
In this video, we'll build a responsive header component using Redwood JS and Tailwind CSS and test it using Snapshot tests
What You'll Learn:
Creating and a header component in React
Converting text to SVG for efficiency
Writing semantic HTML and JSX in VS Code
Styling components with Tailwind CSS, including dark mode
Running and writing tests for your component in Redwood
👉 Chapters
00:00 - Introduction
01:16 - Coding the Header Component
01:34 - Writing HTML/JSX for the Header
01:57 - Converting Fonts to SVG in Figma
03:21 - Styling the Header Component
08:42 - Implementing Dark Mode Styles
09:18 - Writing Tests for the Component
10:10 - Understanding Snapshot Tests
11:06 - Setting Up a Snapshot Test
12:17 - Testing Code Changes
⚡ Quick Links
Code on GitHub: https://github.com/ahaywood/brazilian...
Figma File: https://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 Full-Stack: Redwoo...
Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - • Setup Your Redwood.js Environment: A ...
Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - • RedwoodJS File and Folder Structure: ...
Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - • Maximize Efficiency: Building Faster ...
Part 5: Mastering the Redwood Router: A Comprehensive Overview - • Mastering the Redwood Router: A Compr...
Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - • Easy Tailwind Setup: Customize Fonts ...
Part 7: Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing - • Getting Started with Storybook: The U...
Part 8: Don't Skip Testing: How to Start Testing React Components - • Don't Skip Testing: How to Start Test...
👉 Part 9: THIS VIDEO 👈
🔗 Links
RedwoodJS: https://redwoodjs.com/
RedwoodJS Documentation: https://redwoodjs.com/docs/introduction
YouTube Video on Redwood Router - • Mastering the Redwood Router: A Compr...
RedwoodJS Documentation for working with the Router - https://redwoodjs.com/docs/router#rou...
RedwoodJS Documentation for Testing - https://redwoodjs.com/docs/testing#in...
Watch video Snapshot Tests: Pros, Cons and Best Use Cases online without registration, duration hours minute second in high quality. This video was added by user Self Teach Me 12 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 400 once and liked it 25 people.