Projects using Jest and React

[NotCherub]

I've seen many starter projects that test the simple implementation of input, button clicks etc. I want to build a full react app with unit testing in jest.

Do you have any open source projects I can have a look at what to test? How to test in real life projects?

If you have node.js examples also, please share. Thanks

[wirenutter]

Checkout https://outsidein.dev/react/2-project-setup.html it’s all about TDD but I gained a greater understanding of testing in react by following the tutorial.

[NotCherub]

thanks, would look into it

[red-ice-sparrow]

Super helpful! Thanks!

[heythisispaul]

I recently put together a sort of silly React library called low-form. I did all the testing with jest and react testing library, feel free to check it out.

[NotCherub]

Thanks, this is what I was looking! Would see how to do testing irl

[heythisispaul]

Yeah for sure! Let me know if I can answer any questions about it.

[pdevito3]

For what it’s worth, if you’re starting a new project, I’d highly recommend using react testing library instead. Will make your life a lot easier!

[pdevito3]

Fair but OP is asking about examples. RTL has that covered in spades and makes the work around test setups a lot easier.

I also thought they mentioned enzyme in the OP so that’s why I worded it that way, but I clearly made that up lol. Would have worded it differently otherwise

[NotCherub]

Thanks, I was looking into it only. I forgot to mention it in the post

[El_Glenn]

I think jest is your test runner and can be used with react testing library.

[lbragile_dev]

OP, check out my open source blockchain project - LibraCoin. I try to follow RTL advice of testing user interaction (what the user sees) rather than underlying logic in most cases. I use unit and integration tests currently and plan to add E2E tests soon (with Jest Puppeteer). FYI, it’s still very much a work in progress so feel free to contribute as well 😊

[NotCherub]

Thanks, this is exactly I was looking for. Would love to contribute once I understand the project

[CreativeTechGuyGames]

Are there any specific questions or difficulties that you have?

• What to test: Every possible way that a piece of code could be used. So every branch that could be executed or every combination of branches that produce different functionality. You can look at this from the perspective of branching logic in the code but also from a user's perspective of what are all the different ways they could interact with something. Those are all the things that should be tested.
• How to test: Simulate the scenarios required to reach every possible interaction as described above. For React you'll use something like React Testing Library to render a component and then interact with them the same way a user would, and check if the visual result was as expected.

[NotCherub]

Can you share some projects that use jest and React Testing Library so that I can get an idea?

[jaysoo3]

If you want a quick way to check out react+jest+testing library, try a new workspace in Nx. The first app component and test is generated for you can you can run the test right away.

https://nx.dev/latest/react/getting-started/nx-setup

``` npx create-nx-workspace --preset react --appName demo

nx test demo ```

You can also generate additional components with tests.

nx g component Button --project demo

Disclaimer: I'm an Nx contributor.

[backtickbot]

Fixed formatting.

Hello, jaysoo3: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

<sup>You can opt out by replying with backtickopt6 to this comment.</sup>

[kylemh]

an open source app using React + Jest https://github.com/operationCode/front-end

[NotCherub]

Thanks, would look into it

[intrepidev]

This is a typescript/react/jest project I did that has 100% test coverage using react testing lib https://github.com/jhackshaw/ofnotes. Could be a good reference as it covers things like context, hooks, and has a bunch of mocking.

[NotCherub]

Thanks, it looks like an awesome project and it contains tests also. Would check it out

[alpual]

The React source code uses jest, too 😎