Testing Apache Superset: Migrating from Enzyme to RTL for Improved Testing

Superset uses Jest and React Testing Library (RTL) to write unit and integration tests. In the past we used Enzyme, but now that we're currently converting all of our class components to functional components, Enzyme cannot support our testing needs. Since RTL is better for testing functional components, we're converting all of our test files to RTL. This can be quite a learning curve - I've gone through a lot of the process so I'd like to share what I've learned so far.

First and foremost: We have a Testing Guidelines and Best Practices document that outlines all the code styles we adhere to in our tests. Please use this document as a reference when writing your tests.

The main thing you want to keep in mind is the different approaches each testing library uses in testing:

• Enzyme is code-focused testing. It tests things in the "back" of the code that the user never sees, such as the props of a component.

• RTL is user-focused testing. All of your tests will rely on things the user can see and do.

  • For example: If there were an Enzyme test that checks the props of a component, you would look for where those props show visually on the component and capture it with RTL.

  • Except for certain things like API mocking, Superset uses fetch-mock for that. Here's a link to the docs, if you'd like to learn more about how to mock API calls in RTL. You can also look for other already-existing instances of fetch-mock in the codebase to see how it's used in Superset.

The test environment in Superset is getting healthier and easier to work with by the day, and I hope this will inspire you to help contribute to the cause!

To wrap this up, I would like to leave you with some good RTL/testing resources:

• In your tests, use these commands to help with debugging:
  • screen.debug()

    • This will show you the rendered component in the console when you run the test. You can pass in a captured element if you want to see just that element instead of the whole rendered component.

  • screen.logTestingPlaygroundURL()

    • This will give you a link in the console when you run your test. Click this link and it will open an instance of the testing playground displaying your rendered component (or a captured element passed into the function) in the browser. Check out this link for an example of what that looks like, this is a really cool feature 😁 It would look like this in the code:

const button = screen.getByRole('button');
screen.debug(button);
screen.logTestingPlaygroundURL(button);

• I converted 11 files in this pull request, feel free to use it as a reference for conversions
• The RTL docs have a good guide for converting from Enzyme
• RTL cheatsheet
• Jest matchers
• jest-dom matchers
• Superset has a very handy helper file for RTL with supercharged functionality for our specific needs.