Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Job listings with React, Sass modules & snapshot testing with Jest

Alex Kimโ€ข 1,325

@alex-kim-dev

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. Is it a good approach to pack a number of variables into an object and pass it as a prop to some component in order to reduce the number of props to pass?
<Component data={data} />
// or
<Component prop1={val1} prop2={val2} ... />
  1. Should every component have a snapshot test? I used react-test-renderer and noticed that it renders all nested components too. So if I test, for example, a subscribe form and a whole page with it, the form gets rendered in both of these tests.

Community feedback

Roman Filenkoโ€ข 3,335

@rfilenko

Posted

Hey, a pretty solid work๐Ÿ˜‰ As for your questions, preferable to use one object and pass it as one prop, then you can destructure needed values inside child component. No experience with test-rendered, only used e2e cypress to simulate user experience.

Keep coding and have fun, Roman

3
T
Matt Studdertโ€ข 13,611

@mattstuddert

Posted

Nice work, Alex! I agree with Roman regarding passing the object and then destructuring as you need in the child component. With snapshots, I tend to focus them at the page level because of the full render. That way you have fewer tests, but they're detecting changes all the way down the tree.

Keep up the great work!

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord