diff --git a/packages/react/src/components/Form/Form-test.js b/packages/react/src/components/Form/Form-test.js index 525f2e9ec874..41869b533cf8 100644 --- a/packages/react/src/components/Form/Form-test.js +++ b/packages/react/src/components/Form/Form-test.js @@ -7,59 +7,16 @@ import React from 'react'; import Form from '../Form'; -import { shallow, mount } from 'enzyme'; +import { render } from '@testing-library/react'; -const prefix = 'cds'; - -describe('Form', () => { - describe('Renders as expected', () => { - const wrapper = shallow(
); - - it('renders children as expected', () => { - expect(wrapper.find('.child').length).toBe(0); - }); - it('renders wrapper as expected', () => { - expect(wrapper.length).toBe(1); - }); - it('has the expected classes', () => { - expect(wrapper.hasClass(`${prefix}--form`)).toEqual(true); - }); - - it('renders extra classes passed in via className', () => { - expect(wrapper.hasClass('extra-class')).toEqual(true); - }); - - it('should render wrapper as expected', () => { - const form = shallow( - - ); - expect(form.length).toEqual(1); - }); - it('should render children as expected', () => { - const form1 = shallow( - - ); - expect(form1.find('.test-child').length).toBe(2); - }); +describe('Form - RTL', () => { + it('should support a custom `className` prop on the outermost element', () => { + const { container } = render(); + expect(container.firstChild).toHaveClass('test'); + }); - it('should handle submit events', () => { - const onSubmit = jest.fn(); - const form1 = mount( - - ); - const btn = form1.find('button'); - btn.simulate('submit'); - expect(onSubmit).toHaveBeenCalled(); - }); + it('should spread extra props on the outermost element', () => { + const { container } = render(); + expect(container.firstChild).toHaveAttribute('data-testid', 'test'); }); }); diff --git a/packages/react/src/components/Form/Form.js b/packages/react/src/components/Form/Form.js index 3d29d8f40bd8..14b09376019e 100644 --- a/packages/react/src/components/Form/Form.js +++ b/packages/react/src/components/Form/Form.js @@ -15,8 +15,7 @@ const Form = ({ className, children, ...other }) => { const classNames = classnames(`${prefix}--form`, className); return ( ); }; diff --git a/packages/react/src/components/FormGroup/FormGroup-test.js b/packages/react/src/components/FormGroup/FormGroup-test.js index 2c7f0e054713..18ab946736cc 100644 --- a/packages/react/src/components/FormGroup/FormGroup-test.js +++ b/packages/react/src/components/FormGroup/FormGroup-test.js @@ -7,52 +7,74 @@ import React from 'react'; import FormGroup from '../FormGroup'; -import { shallow } from 'enzyme'; - -const prefix = 'cds'; +import { render, screen } from '@testing-library/react'; describe('FormGroup', () => { - describe('Renders as expected', () => { - const wrapper = shallow( -