Post/Code

HomeAboutUsesNow

The React Testing Ecosystem.

I answered a question on the Udacity Knowledge platform about what to use when testing React. I have reposted it below for reference:

Question

"Hello,

I've just finished my first project "MyReads".

Instead of adding more features, I thought it would be better if I add some testing (and docs later) to the project.

What do you think and do you recommend any tool?

Thanks"

Answer

Great idea! Writing tests takes some getting used to since you need to shift your mindset and habits about the way you write code. While it takes some time and can be a challenge to adapt, it is worth it!

Something I also keep in mind is, some tests are better than no tests. As such, even if you find you can't quite figure out certain aspects of testing, don't let that stop you. Over time, you will figure things out, learn new things and as you do, you can add more and more tests and capabilities as you go.

Testing

Jest comes bundled with React. As such, you can write unit tests with Jest without installing anything else. React however, has some aspects that Jest was not designed for, i.e. rendering components etc.

React

As a result, there are a few libraries available to do React-specific testing.

React Testing Library - New(er) framework on the block, I find it intuitive and easy to use. Seems to be gaining traction quickly. Enzyme - Enzyme has been around much longer than React Testing Library and is widely used. As such, you will use both React Testing Library (or Enzyme) and Jest together to write your unit and integration tests.

My preference is React Testing Library (over Enzyme) since it is more integration-like in that it is primarily concerned with testing how the user would use the app. However, out in the wild, you are likely to find Enzyme being used since it has been around longer. As such, it might be useful to at get some familiarity with both.

End to End Testing (e2e)

Though not specific to React, I recommend Cypress for end-to-end (e2e) testing. Cypress can be used with most front-end libraries (React, Angular, Vue etc) and has a jQuery-like syntax to write e2e tests. Coming front a front-end background, I found Cypress to be far easier to pick up on than writing unit tests since it is primarily concerned with replicating what the user would do on the site, not necessarily with testing units, functions or implementation details.

Overall, there is something very satisfying about having a set of automated tests that you can see running through all the interactions on your site in high speed!

React Native

While I am not as familiar with the React Native ecosystem, there is a React Testing Library equivalent for React Native called (unsurprisingly) React Native Testing Library. It is heavily inspired by React Testing Library.

For e2e testing for React Native, you can use Detox.

Linting and Formatting

Furthermore, while not "testing" specifically, you should also make use of a linter and formatter for automatically picking up on syntax issues and maintaining format style across projects. These are tools that can be integrated into your code editor as well as with npm or Docker for use in CI/CD pipelines.

For linting you can use eslint and for formatting you can use prettier.