Refactor the React test suite to use React Testing Library

This issue is to track the refactoring of our React test suite to use React Testing Library.

Links and resources

• https://www.notion.so/carbondesignsystem/Audits-ca3fe640ffe242ac91bf3ab0749cb499?p=b1b911fa52a147d3af63d177c0a0ec3b&showMoveTo=true
• https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/
• https://kentcdodds.com/blog/avoid-nesting-when-youre-testing

How to find enzyme usages

The list below was generated by searching for enzyme within files having names containing our test suffix:

https://user-images.githubusercontent.com/3360588/145886255-373f50c4-d3d3-4322-9963-bbea094192b4.mov

List of enzyme usages to be refactored:

• #12665
• #12666
• #12667
• #12668
• #12669
• #12670
• #12671
• #12672
• #12673
• #12674
• #12675
• #11736
• #12153
• #12155
• #12157
• #12158
• #12159
• #12160
• #12676
• #12663
• #12354
• #12677
• #12678
• #12679
• #12680
• #12681
• #12683
• #12682
• #12684
• #12685
• #12686
• #12687
• #12688

---

• Use RTL for testing in Accordion/__tests__/Accordion.Skeleton-test.js
• Use RTL for testing in Accordion/__tests__/AccordionItem-test.js
• #10273
• Use RTL for testing in Breadcrumb/__tests__/Breadcrumb.Skeleton-test.js
• Use RTL for testing in Button/Button-test.js
• Use RTL for testing in ButtonSet/ButtonSet-test.js
• Use RTL for testing in Checkbox/Checkbox-test.js
• #10272
• #11706
• https://github.com/carbon-design-system/carbon/issues/11883
• https://github.com/carbon-design-system/carbon/issues/11886
• https://github.com/carbon-design-system/carbon/issues/11884
• https://github.com/carbon-design-system/carbon/issues/11885
• #11509
• #11510
• #11511
• Use RTL for testing in DataTable/__tests__/Table-test.js
• Use RTL for testing in DataTable/__tests__/TableActionList-test.js
• Use RTL for testing in DataTable/__tests__/TableBatchAction-test.js
• Use RTL for testing in DataTable/__tests__/TableBatchActions-test.js
• Use RTL for testing in DataTable/__tests__/TableBody-test.js
• Use RTL for testing in DataTable/__tests__/TableCell-test.js
• Use RTL for testing in DataTable/__tests__/TableContainer-test.js
• Use RTL for testing in DataTable/__tests__/TableHead-test.js
• Use RTL for testing in DataTable/__tests__/TableRow-test.js
• #11512
• #11704
• https://github.com/carbon-design-system/carbon/issues/11956
• #11994
• #11641
• #11642
• #11643
• #11644
• #11559
• #11560
• #11561
• Use RTL for testing in ListBox/__tests__/ListBox-test.js
• Use RTL for testing in ListBox/__tests__/ListBoxField-test.js
• Use RTL for testing in ListBox/__tests__/ListBoxMenu-test.js
• Use RTL for testing in ListBox/__tests__/ListBoxMenuIcon-test.js
• Use RTL for testing in ListBox/__tests__/ListBoxMenuItem-test.js
• Use RTL for testing in ListBox/__tests__/ListBoxSelection-test.js
• #11824
• https://github.com/carbon-design-system/carbon/issues/11957
• #11710
• #11711
• #11712
• #11713
• #11705
• #11707
• #11714
• #11729
• #10277
• #11730
• #11731
• #11732
• https://github.com/carbon-design-system/carbon/issues/12021
• https://github.com/carbon-design-system/carbon/issues/12022
• https://github.com/carbon-design-system/carbon/issues/12023
• https://github.com/carbon-design-system/carbon/issues/11958
• #12087
• #11733
• #11734
• #11735
• #12088
• #12154
• #12156
• #11630
• #11629
• #11709
• #11708
• #10274
• #11995
• #10275
• Use RTL for testing in UIShell/__tests__/Header-test.js
• Use RTL for testing in UIShell/__tests__/HeaderGlobalAction-test.js
• Use RTL for testing in UIShell/__tests__/HeaderGlobalBar-test.js
• Use RTL for testing in UIShell/__tests__/HeaderMenu-test.js
• Use RTL for testing in UIShell/__tests__/HeaderMenuButton-test.js
• Use RTL for testing in UIShell/__tests__/HeaderMenuItem-test.js
• Use RTL for testing in UIShell/__tests__/HeaderName-test.js
• Use RTL for testing in UIShell/__tests__/Link-test.js
• Use RTL for testing in UIShell/__tests__/SideNav-test.js
• Use RTL for testing in UIShell/__tests__/SideNavDetails-test.js
• Use RTL for testing in UIShell/__tests__/SideNavFooter-test.js
• Use RTL for testing in UIShell/__tests__/SideNavHeader-test.js
• Use RTL for testing in UIShell/__tests__/SideNavIcon-test.js
• Use RTL for testing in UIShell/__tests__/SideNavItem-test.js
• Use RTL for testing in UIShell/__tests__/SideNavItems-test.js
• Use RTL for testing in UIShell/__tests__/SideNavLink-test.js
• Use RTL for testing in UIShell/__tests__/SideNavLinkText-test.js
• Use RTL for testing in UIShell/__tests__/SideNavMenu-test.js
• Use RTL for testing in UIShell/__tests__/SideNavMenuItem-test.js
• Use RTL for testing in UIShell/__tests__/SideNavSwitcher-test.js
• Use RTL for testing in UIShell/__tests__/SkipToContent-test.js
• Use RTL for testing in UIShell/next/__tests__/SideNavMenu-test.js
• #10276
• Use RTL for testing in TimePicker/TimePicker-test.js

[abbeyhrt]

Yeah!

Directions to use build-tests script:

1. In your terminal, change directories to packages/react
2. Run node tasks/build-test-rtl.js and choose the component you are wanting to create tests for. If for some reason, a file cannot be made, you will be prompted to copy the created tests if you want to paste them in the appropriate place.
3. That command will create a new test file called <Component>-test.js--copy in the component’s directory. To get the test-runner to find the new tests, you will need to update the file name to <Component>-test.js and either rename or remove the currently existing test file.

[joshblack]

@tay1orjones PR for it over in: https://github.com/carbon-design-system/carbon/pull/10302 👍