diff --git a/packages/react/src/components/Icon/Icon.Skeleton-test.js b/packages/react/src/components/Icon/Icon.Skeleton-test.js
new file mode 100644
index 000000000000..bd36207cd7ab
--- /dev/null
+++ b/packages/react/src/components/Icon/Icon.Skeleton-test.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import IconSkeleton from './Icon.Skeleton';
+
+describe('IconSkeleton', () => {
+ it('should pass in an extra className when one is given', () => {
+ render();
+ expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
+ });
+});
diff --git a/packages/react/src/components/SkeletonIcon/SkeletonIcon-test.js b/packages/react/src/components/SkeletonIcon/SkeletonIcon-test.js
index defcf63ba5a6..103f2be2953e 100644
--- a/packages/react/src/components/SkeletonIcon/SkeletonIcon-test.js
+++ b/packages/react/src/components/SkeletonIcon/SkeletonIcon-test.js
@@ -7,14 +7,11 @@
import React from 'react';
import SkeletonIcon from '../SkeletonIcon';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import { render, screen } from '@testing-library/react';
describe('SkeletonIcon', () => {
- const wrapper = shallow();
-
- it('Has the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--icon--skeleton`)).toEqual(true);
+ it('should pass in an extra className when one is given', () => {
+ render();
+ expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
});
});
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-test.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-test.js
index 08170759517f..f3c8f4b9fbd0 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-test.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-test.js
@@ -7,14 +7,13 @@
import React from 'react';
import SkeletonPlaceholder from '../SkeletonPlaceholder';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import { render, screen } from '@testing-library/react';
describe('SkeletonPlaceholder', () => {
- const wrapper = shallow();
-
- it('Has the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--skeleton__placeholder`)).toEqual(true);
+ it('should pass in an extra className when one is given', () => {
+ render(
+
+ );
+ expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
});
});
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-test.js b/packages/react/src/components/SkeletonText/SkeletonText-test.js
index b681ef1ba871..fb75499cc13b 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText-test.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText-test.js
@@ -7,26 +7,22 @@
import React from 'react';
import SkeletonText from '../SkeletonText';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
const prefix = 'cds';
describe('SkeletonText', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow();
-
- it('Has the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--skeleton__text`)).toEqual(true);
- });
+ it('should pass in an extra className when one is given', () => {
+ render();
+ expect(screen.getByTestId('skeleton')).toHaveClass('custom-class');
});
});
describe('SkeletonText Heading', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow();
-
- it('Has the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--skeleton__heading`)).toEqual(true);
- });
+ it('should add heading classNames when the heading prop is passed in', () => {
+ render();
+ expect(screen.getByTestId('skeleton2')).toHaveClass(
+ `${prefix}--skeleton__heading`
+ );
});
});