Superset uses and React Testing Library ( ) to write unit and integration tests. In the past we used , 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. Jest RTL Enzyme First and foremost: We have a document that outlines all the code styles we adhere to in our tests. Please use this document as a reference when writing your tests. Testing Guidelines and Best Practices The main thing you want to keep in mind is the different approaches each testing library uses in testing: It tests things in the "back" of the code that the user never sees, such as the props of a component. Enzyme is code-focused testing. All of your tests will rely on things the user can see and do. RTL is user-focused testing. 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. , 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. Here's a link to the docs 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. for an example of what that looks like, this is a really cool feature 😁 It would look like this in the code: Check out this link const button = screen.getByRole('button');
screen.debug(button);
screen.logTestingPlaygroundURL(button); I converted 11 files in , feel free to use it as a reference for conversions this pull request The RTL docs have a good guide for converting from Enzyme RTL cheatsheet Jest matchers jest-dom matchers Superset has a very handy for RTL with supercharged functionality for our specific needs. helper file Originally posted . here Lead image source.

Migrating from useState to useReducer in React Hooks

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An Advanced Approach to Migrating From useState to useReducer

A Better Guide to Build Apache Superset From source

Installing Locally Is Easy Using the Makefile: An Apache Superset Guide

Integrating Apache Druid and Apache Superset with MinIO

Integrating Manticore Search with Apache Superset

Making Apache Superset into a macOS App

An Advanced Approach to Migrating From useState to useReducer

A Better Guide to Build Apache Superset From source

Installing Locally Is Easy Using the Makefile: An Apache Superset Guide

Integrating Apache Druid and Apache Superset with MinIO

Integrating Manticore Search with Apache Superset

Making Apache Superset into a macOS App

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps