Level up your Web Application Testing

Get access to all lessons in this workshop.

Includes all 5 workshops + bonus:
Full Stack Foundations workshopProfessional Web Forms workshopData Modeling Deep Dive workshopAuthentication Strategies & Implementation workshopWeb Application Testing workshop+Interviews with Experts workshop

Full Stack Vol 1

Full Stack Vol 1

Loading price
Full Stack Vol 1
30-Day Money-Back Guarantee
Money Back Guarantee
includes
Workshops
  • Full Stack Foundations

  • Professional Web Forms

  • Data Modeling Deep Dive

  • Authentication Strategies & Implementation

  • Web Application Testing

  • BonusInterviews with Experts

Features
  • 5 Self-Paced Workshops

  • Lifetime Access

  • Customizable Invoice

  • Streaming 4K Video

  • 166 Interactive Exercises

  • Discord Community

  • English Transcripts & Subtitles

  • Progress Tracking

  • Completion Certificates

Current section: Testing Remix 4 exercises
Problem

Creating a Stub for Testing Component Logic in Remix

This exercise is part of Web Application Testing and can be unlocked immediately after purchase. Already purchased? Log in here.

Transcript

00:00 So here we've got our username route, and if we are not logged in, then it's just going to say when the user joined, it'll say their name, it'll have their avatar, and it will have a link to their notes. But if we log in as this user, and then go to there, then we're also going to get a logout button and an edit profile button.

00:19 So there, right there, we've got some logic. And having some logic for this, sometimes it makes sense to do at a lower level than an end-to-end test, especially when you get into a much more complicated page. It's nice to be able to isolate your test down to the specifics,

00:36 so you can handle edge cases and various other states that the user can be in for a particular component. So in this first step, we're going to create a remix stub, so that we can stub out all of the stuff that Remix does for us, because this is rendering a form, an action form.

00:55 This is rendering a link. And there are various other things that Remix sets up in context for us, like our loader data, for example, for even loading this stuff. So we need to have a stub, which is basically just like a fake version of a real thing. It's kind of like a mock, but this doesn't keep track of how it's called or anything.

01:13 It's just like a fake object. It's like a setup function. So we're making a stub of our app, and then we can render it to render this out and make some assertions on the stuff that's being rendered. So that's what you're going to be doing in this exercise. I hope you have a great time!