How to get started with testing in React?

Hello there, right now I'm focusing on learning testing in React, but I've been facing a hard time trying to find good material about that. Some tutorials that I find are too shallow or a little bit outdated and maybe I'm still too newbie to understand the documentation.

What do you think? How did you get started with testing in React? Which resources do you recommend? (Bonus point if it's free or cheap)

Comments

[Felipe Armoni]

Hi,

I am using mostly Enzyme, but I am also trying out React Testing Library. Both are great and will help you get your unit tests running.

I wrote an article a while ago about unit testing the Apollo Graphql: dev.to/komyg/unit-tests-with-enzym.... Maybe it is helpful to you.

I also think it is great that you are looking into tests. I've met a lot of people who overlook them for the frontend, but I find that an investment in tests is worth every minute of your time. Your code will be better and you will be much more confident on your deployments.

One thing to remember when using Enzyme's mount and React Testing Library render is that you are in fact mounting all of your component tree and not just the one you want to test, so you should use mocks to keep things isolated. Otherwise a change to one component can break a test in another.

A pattern that I usually employ in this cases is this:

Say you have a simple component:

import React from 'react';
import SimpleHeader from '../components/simple-header';

export default function MyComponent() {
  return (
    <div>
      <SimpleHeader title='Hello World!/>
    </div>
  );
}

Then you can test it like this:

describe('MyComponent Test', () => {
  it('should mount', () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper).toBeTruthy();
    expect(wrapper).toContainMatchingElement('SimpleHeader');
  });
});

But in this case you will mount both the MyComponent and the SimpleHeader in your test. Which can be fine depending on your needs. But I think that it is a good practice to mock the SimpleHeader and write another unit test just for it. To do this, you can use this pattern in your test file:

jest.mock('../components/simple-header, () => ({
  __esModule: true,
  default: function SimpleHeader() {
    return <div id='simple-header' />;
  },
}));

This way you will only get this <div id='simple-header' /> instead of the whole SimpleHeader component.

Best regards,
Felipe

[Marina Costa]

Hi Felipe, thanks for taking the time to comment here. :D
Yes, In the frontend courses I took, testing was not one of the main points. Now that I’m learning more about it, I don’t really understand this approach, I think testing should be much more explored, especially for beginners. If you already learn to apply good practices from the beginning, it becomes something natural to you.
Thanks for sharing this tip about using the mount (or render), I didn't know that.
Best,
Marina

[Marina Costa]

So far, I already know some concepts of TDD, but I need to understand what exactly to test if I'm not following this methodology. Maybe some hints about this would be nice as well.
Also, considering I'm focusing on React, I think my first step should be to learn react-testing-library, but I find way more material about Enzyme instead. I'm not sure in which one I should invest my time (or maybe both?)

[Matt McParland]

We've been using react-testing-library and I really like it. There's still some issues with it but it's improving fast. If you're using it I'd recommend following Kent C Dodds blog, he's an author of it. This blog post is very good (would recommend adding the linters at the bottom too) kentcdodds.com/blog/common-mistake...

We've also been using cypress.io for our e2e tests. Would highly recommend this, vastly superior over selenium.

When writting both of these I'd look at the project and see the common actions you'll need to do when testing and create a concise, lightweight way to do these. For example a common 'mock' API that can be used across all your unit tests (and maybe cypress tests too depending on your goals), but keep this as small as possible (think 80-20 rule). If you need to do something specific just do it in that one test. Hope this helps!

[Marina Costa]

I'll check cypress and react-testing-library then. :D
I haven't thought about creating a common mock API, that sounds interesting. It would make that tests cleaner. Nice.
Thanks for contributing.