[test] Migrate tests from enzyme to react-testing-library

See original GitHub issue

15 months ago, we have introduced react-testing-library in the codebase: #15732. Since, then, we have been progressively migrating the tests from enzyme to react-testing-library. This was done as a background task, so far. Especially when we were migrating a component from class names to hooks or when we needed to fix a bug.

However, we have seen community members interested in helping with this effort, e.g. @baterson in #22441, @marcosvega91 in #20914, @emilyuhde in #17942, or @eladmotola in #22906.

I have opened this issue so we can keep track of the tests that are left to be migrated and avoid conflicts:

Search for createMount() usage
Menu.test.js (https://github.com/mui-org/material-ui/pull/26915)
Modal.test.js (https://github.com/mui-org/material-ui/pull/26912)
Popover.test.js (https://github.com/mui-org/material-ui/pull/26913)
SwipeableDrawer.test.js (https://github.com/mui-org/material-ui/pull/26916)
Drawer.test.js (https://github.com/mui-org/material-ui/pull/26837)
Accordion.test.js (#22952)
Backdrop.test.js (#22931)
ButtonBase.test.js (https://github.com/mui-org/material-ui/pull/23011)
Container.test.js (#22919)
CssBaseline.test.js (#22920)
Fab.test.js (#22959)
Fade.test.js (#22918)
Grow.test.js (#22917)
IconButton.test.js (#22972)
ImageListItem.test.js (#22958)
InputBase.test.js (#23014)
Link.test.js (#22892)
List.test.js (#22929)
MenuList.test.js (#22958)
MobileStepper.test.js (#22963)
NativeSelect.test.js (#22970)
NativeSelectInput.test.js (#22910)
RadioGroup.test.js (#22953)
Slide.test.js (#22913)
SpeedDial.test.js (#23021)
SpeedDialIcon.test.js (#22965)
StepContent.test.js
TableBody.test.js (#20914)
TableCell.test.js (#20914)
TableFooter.test.js (#20914)
TableHead.test.js (#20914)
TablePagination.test.js (#20914)
TableRow.test.js (#20914)
TabList.test.js
TabIndicator.test.js (#22906)
TextField.test.js (#22944)
useTheme.test.js (#22928)
withTheme.test.js (#22928)
Zoom.test.js (#22914)

Integration

test/integration/Menu.test.js
test/integration/MenuList.test.js
test/integration/NestedMenu.test.js
test/integration/Select.test.js
test/integration/TableCell.test.js (#23095)
test/integration/TableRow.test.js (#23105)

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:31 (26 by maintainers)

Top GitHub Comments

5reactions

oliviertassinaricommented, Oct 10, 2020

Last month, react-testing-library had more downloads than enzyme in the ecosystem!

1reaction

eps1loncommented, Jun 19, 2021

Still have tests using createMount

Top Results From Across the Web

Migrating from Enzyme to React Testing Library - Medium

Enzyme and React Testing Library (RTL) are packages which provide utilities to enhance unit tests for React components. Enzyme has been popular for...

Migrating from Enzyme to React Testing Library

Technique #1: Snapshot tests with RTL ... .toJSON();. expect(letter).toMatchSnapshot();. }); }); Basically you take the rendered tree, convert it ...

Replacing Enzyme with React Testing Library

We can call the test we wrote with React Testing Library an integration test. We verify if the Counter component works well with...

My experience migrating from enzyme to react testing library

Migrate right away all tests using mount , as those are the ones behaving differently. New tests should be written directly with react...

react-testing-library vs. Enzyme - LogRocket Blog

To migrate tests from react-testing-library to Enzyme, you'll need to install an additional library called enzyme-adapter-react-[react-version] ...