Coder Social home page Coder Social logo

dakotalmartinez / sundaes-on-demand-rtl-jest-msw Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 359 KB

Project from RTL & Jest course by Bonnie Schulkin. Click below to view live!

Home Page: https://dynamic-marshmallow-74dc27.netlify.app/

HTML 3.82% JavaScript 94.17% CSS 2.01%

sundaes-on-demand-rtl-jest-msw's Introduction

Sundaes On Demand

This project is the example project built alongside Bonnie Schulkin's React Testing Library with Jest course. I'm including some information below about the course content and below that I'll summarize my impressions of the course and some key takeaways.

Description

React Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course provides a solid foundation for React app tests.

Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

  • testing behavior over testing implementation

  • tests that interact with your app the way a user would

  • finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as:

  • testing asynchronous page changes

  • simulating data from a server using Mock Service Worker

  • applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides "code quizzes" while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

My Impressions

I really appreciated the code quizzes. I felt they were well paced, keeping you just on the edge of being comfortable but definitely not too much. I also really liked that they became more frequent towards the end of the course, so it really started to feel like we were building the app & tests based on a mockup and spec rather than just doing a codealong.

I also really liked the introduction of a workflow with a series of questions to ask when writing tests. I ended up making a dash snippet for it and using it to guide the process. Here's a breakdown of it:

Feature description

Question Answer
What to render?
Pass props?
Wrap render?
Which file for tests?
What to test?
How to test?
Do we need async/await?

The idea is to think about the feature you're building and then ask this series of questions to determine the how/what/where of your approach to testing the components involved. I love this questions driven approach and use it a lot in my own teaching as I find it's effective at delivering lasting value to students.

I came away from the course with a good sense of how to test most situations that I find myself in when building React applications. My next learning goals at the moment are to start working on integrating typescript in my work and also getting CI/CD set up for my own projects. I've worked on projects that had an integrated pipeline already set up, but never done the setup and configuration myself, so that's my current next step.

Overall, I definitely recommend the course. I'm looking forward to doing more of Bonnie's courses in the future. In particular, I've got my eye on her course on React Query (TanStack Query).

sundaes-on-demand-rtl-jest-msw's People

Contributors

dakotalmartinez avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.