How to get started with testing in React?

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

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?)