chore(UnorderedList): refactor to rtl tests (#10387)

* chore(UnorderedList): refactor to rtl tests * Update packages/react/src/components/UnorderedList/UnorderedList-test.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/UnorderedList/UnorderedList-test.js Co-authored-by: Josh Black <[email protected]> * Update packages/react/src/components/UnorderedList/UnorderedList-test.js Co-authored-by: Josh Black <[email protected]> * chore: empty commit * chore: fix format Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Jan 14, 2022 · e95d6ad · e95d6ad
1 parent 8c353ed
commit e95d6ad
Showing 1 changed file with 27 additions and 20 deletions.
diff --git a/packages/react/src/components/UnorderedList/UnorderedList-test.js b/packages/react/src/components/UnorderedList/UnorderedList-test.js
@@ -8,36 +8,43 @@
 import React from 'react';
 import UnorderedList from '../UnorderedList';
 import ListItem from '../ListItem';
-import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
+import { render, screen } from '@testing-library/react';
 
 const { prefix } = settings;
+
 describe('UnorderedList', () => {
-  describe('Renders as expected', () => {
-    const list = shallow(
-      <UnorderedList className="some-class">
+  it('should render children as expected', () => {
+    render(
+      <UnorderedList>
         <ListItem>Item</ListItem>
       </UnorderedList>
     );
+    expect(screen.getByText('Item')).toBeInTheDocument();
+  });
 
-    it('should be a ul element', () => {
-      expect(list.find('ul').length).toEqual(1);
-    });
+  it('should render nested lists', () => {
+    render(
+      <UnorderedList>
+        <ListItem>Item</ListItem>
+        <UnorderedList nested data-testid="nested-list">
+          <ListItem>Nested</ListItem>
+        </UnorderedList>
+      </UnorderedList>
+    );
 
-    it('should render with the appropriate classes', () => {
-      expect(list.hasClass(`${prefix}--list--unordered`)).toEqual(true);
-      expect(list.hasClass('some-class')).toEqual(true);
-    });
+    expect(screen.getByTestId('nested-list')).toHaveClass(
+      `${prefix}--list--nested`
+    );
+  });
 
-    it('should render children as expected', () => {
-      expect(list.find(ListItem).length).toEqual(1);
-    });
+  it('should add custom className given via className prop', () => {
+    render(
+      <UnorderedList className="some-class" data-testid="list">
+        <ListItem>Item</ListItem>
+      </UnorderedList>
+    );
 
-    it('should render nested lists', () => {
-      list.setProps({ nested: true });
-      expect(list.hasClass(`${prefix}--list--nested`)).toEqual(true);
-      list.setProps({ nested: false });
-      expect(list.hasClass(`${prefix}--list--nested`)).toEqual(false);
-    });
+    expect(screen.getByTestId('list')).toHaveClass('some-class');
   });
 });