refactor: update tests 2

src/Card/CardDivider.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const CardDivider = React.forwardRef(({ className }, ref) => (
-  <div className={classNames('pgn__card-divider', className)} ref={ref} />
+const CardDivider = React.forwardRef(({ className, ...props }, ref) => (
+  <div className={classNames('pgn__card-divider', className)} ref={ref} {...props} />
 ));
 
 CardDivider.propTypes = {

src/Card/CardStatus.jsx

@@ -12,6 +12,7 @@ const CardStatus = React.forwardRef(({
   icon,
   title,
   actions,
+  ...props
 }, ref) => {
   const { isLoading } = useContext(CardContext);
 
@@ -38,6 +39,7 @@ const CardStatus = React.forwardRef(({
         className,
       )}
       ref={ref}
+      {...props}
     >
       <div className="pgn__card-status__content">
         {icon && <Icon className="pgn__card-status__content-icon" src={icon} />}

src/Card/tests/CardDivider.test.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import { mount } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import CardDivider from '../CardDivider';
 
 describe('correct rendering', () => {
   it('renders default divider', () => {
-    const divider = mount(<CardDivider />).find('div');
+    render(<CardDivider data-testid="card-divider" />);
+    const divider = screen.getByTestId('card-divider');
 
-    expect(divider).toHaveLength(1);
-    expect(divider.prop('className')).toEqual('pgn__card-divider');
+    expect(divider).toBeTruthy();
   });
 
   it('renders divider with custom className', () => {
     const className = 'my-class-name';
-    const divider = mount(<CardDivider className={className} />).find('div');
+    const { container } = render(<CardDivider className={className} />);
+    const divider = container.querySelector('.my-class-name');
 
-    expect(divider.prop('className')).toEqual('pgn__card-divider my-class-name');
+    expect(divider).toBeTruthy();
   });
 });

src/Card/tests/CardFooter.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Button from '../../Button';
 import CardFooter from '../CardFooter';
 import CardContext from '../CardContext';
@@ -59,21 +59,20 @@ describe('<CardFooter />', () => {
   });
   it('renders footer text as element', () => {
     const textElement = <a href="https://example.com">Link text here</a>;
-    const wrapper = mount(<CardFooterWrapper textElement={textElement} />);
-    const link = wrapper.find('a');
-    expect(wrapper.find('button').length).toEqual(2);
-    expect(link.exists()).toEqual(true);
-    expect(link.prop('children')).toEqual('Link text here');
-    expect(link.prop('href')).toEqual('https://example.com');
+    const { getByText } = render(<CardFooterWrapper textElement={textElement} />);
+    const link = getByText('Link text here');
+
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toBe('https://example.com');
   });
-  it('render without loading state', () => {
-    const wrapper = mount(<CardFooterWrapper />);
-    expect(wrapper.exists('.pgn__card-footer-loader')).toBe(false);
-    expect(wrapper.props().isLoading).toBeUndefined();
+
+  it('renders without loading state', () => {
+    const { container } = render(<CardFooterWrapper />);
+    expect(container.querySelector('.pgn__card-footer-loader')).toBeNull();
   });
-  it('render with loading state', () => {
-    const wrapper = mount(<CardFooterWrapper isLoading />);
-    expect(wrapper.exists('.pgn__card-footer-loader')).toBe(true);
-    expect(wrapper.props().isLoading).toBe(true);
+
+  it('renders with loading state', () => {
+    const { container } = render(<CardFooterWrapper isLoading />);
+    expect(container.querySelector('.pgn__card-footer-loader')).toBeTruthy();
   });
 });

src/Card/tests/CardHeader.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Button from '../../Button';
 import CardHeader from '../CardHeader';
 import CardContext from '../CardContext';
@@ -39,14 +39,13 @@ describe('<CardHeader />', () => {
     )).toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render without loading state', () => {
-    const wrapper = mount(<CardHeaderWrapper />);
-    expect(wrapper.exists('.pgn__card-header-loader')).toBe(false);
-    expect(wrapper.props().isLoading).toBeUndefined();
+  it('renders without loading state', () => {
+    const { container } = render(<CardHeaderWrapper />);
+    expect(container.querySelector('.pgn__card-header-loader')).toBeNull();
   });
-  it('render with loading state', () => {
-    const wrapper = mount(<CardHeaderWrapper isLoading />);
-    expect(wrapper.exists('.pgn__card-header-loader')).toBe(true);
-    expect(wrapper.props().isLoading).toBe(true);
+
+  it('renders with loading state', () => {
+    const { container } = render(<CardHeaderWrapper isLoading />);
+    expect(container.querySelector('.pgn__card-header-loader')).toBeTruthy();
   });
 });

src/Card/tests/CardSection.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Button from '../../Button';
 import CardSection from '../CardSection';
 import CardContext from '../CardContext';
@@ -44,15 +44,14 @@ describe('<CardSection />', () => {
     )).toJSON();
     expect(tree).toMatchSnapshot();
   });
-  it('render without loading state', () => {
-    const wrapper = mount(<CardSectionWrapper />);
-    expect(wrapper.exists('.pgn__card-section-loader')).toBe(false);
-    expect(wrapper.props().isLoading).toBeUndefined();
+  it('renders without loading state', () => {
+    const { container } = render(<CardSectionWrapper />);
+    expect(container.querySelector('.pgn__card-section-loader')).toBeNull();
   });
-  it('render with loading state', () => {
-    const wrapper = mount(<CardSectionWrapper isLoading />);
-    expect(wrapper.exists('.pgn__card-section-loader')).toBe(true);
-    expect(wrapper.props().isLoading).toBe(true);
+
+  it('renders with loading state', () => {
+    const { container } = render(<CardSectionWrapper isLoading />);
+    expect(container.querySelector('.pgn__card-section-loader')).toBeTruthy();
   });
   it('renders muted variant', () => {
     const tree = renderer.create((

src/Card/tests/CardStatus.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 
@@ -16,23 +15,26 @@ describe('correct rendering', () => {
     expect(tree).toMatchSnapshot();
   });
   it('renders correct base className', () => {
-    const wrapper = mount(<CardStatus>Text</CardStatus>);
-    expect(wrapper.find('.pgn__card-status').length).toBeGreaterThan(0);
+    render(<CardStatus data-testid="card-status">Text</CardStatus>);
+    expect(screen.getByTestId('card-status').className).toContain('pgn__card-status');
   });
+
   it('renders body with custom className', () => {
     const className = 'my-class-name';
-    const wrapper = mount(<CardStatus className={className}>Text</CardStatus>);
-    expect(wrapper.find('.my-class-name').length).toBeGreaterThan(0);
+    render(<CardStatus className={className} data-testid="card-status">Text</CardStatus>);
+    expect(screen.getByTestId('card-status').className).toContain(className);
   });
+
   it('renders with correct variant', () => {
     const variant = 'primary';
-    const wrapper = mount(<CardStatus variant={variant}>Text</CardStatus>);
-    expect(wrapper.find('.pgn__card-status__primary').length).toBeGreaterThan(0);
+    render(<CardStatus variant={variant} data-testid="card-status">Text</CardStatus>);
+    expect(screen.getByTestId('card-status').className).toContain(`pgn__card-status__${variant}`);
   });
+
   it('renders with icon', () => {
     const icon = WarningFilled;
-    const wrapper = mount(<CardStatus icon={icon}>Text</CardStatus>);
-    expect(wrapper.find('.pgn__icon').length).toBeGreaterThan(0);
+    const { container } = render(<CardStatus icon={icon}>Text</CardStatus>);
+    expect(container.querySelector('svg')).toBeTruthy();
   });
   it('renders with title', () => {
     const titleText = 'Hello world!';