test(button): switch button tests to react testing library

packages/react/__tests__/axe.ts

@@ -0,0 +1,9 @@
+import { JestAxe, configureAxe } from 'jest-axe';
+
+const axe: JestAxe = configureAxe({
+  rules: {
+    region: { enabled: false }
+  }
+});
+
+export default axe;

packages/react/__tests__/setupTests.js → packages/react/__tests__/setupTests.ts

@@ -1,5 +1,6 @@
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import '@testing-library/jest-dom';
 import 'jest-axe/extend-expect';
 
 configure({ adapter: new Adapter() });

packages/react/package.json

@@ -43,10 +43,14 @@
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^11.1.2",
     "@svgr/rollup": "^6.1.2",
+    "@testing-library/react": "11.1.2",
+    "@testing-library/jest-dom": "^6.1.3",
     "@types/classnames": "^2.2.10",
     "@types/node": "^17.0.42",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
+    "@types/jest-axe": "^3.5.4",
+    "@types/jest": "^24.7.1",
     "@types/react-syntax-highlighter": "^15.5.2",
     "autoprefixer": "^9.7.6",
     "babel-plugin-module-resolver": "^4.0.0",
@@ -92,11 +96,12 @@
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "<rootDir>__tests__/setupTests.js"
+      "<rootDir>__tests__/setupTests.ts"
     ],
     "testMatch": [
       "**/__tests__/src/**/*.js",
-      "**/__tests__/demo/**/*.js"
+      "**/__tests__/demo/**/*.js",
+      "**/src/components/**/*.test.tsx"
     ],
     "collectCoverageFrom": [
       "**/src/**/*.{ts,tsx}"

packages/react/src/axe.ts

@@ -0,0 +1,9 @@
+import { JestAxe, configureAxe } from 'jest-axe';
+
+const axe: JestAxe = configureAxe({
+  rules: {
+    region: { enabled: false }
+  }
+});
+
+export default axe;

packages/react/src/components/Button/index.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Button from '../../../src/components/Button';
+import Icon from '../../../src/components/Icon';
+import axe from '../../axe';
+
+test('should render primary button', () => {
+  render(
+    <>
+      <Button>default primary</Button>
+      <Button variant="primary">variant primary</Button>
+    </>
+  );
+  expect(screen.getByRole('button', { name: 'default primary' })).toHaveClass(
+    'Button--primary'
+  );
+  expect(screen.getByRole('button', { name: 'variant primary' })).toHaveClass(
+    'Button--primary'
+  );
+});
+
+test('should render secondary button', () => {
+  render(<Button variant="secondary">secondary</Button>);
+  const SecondaryButton = screen.getByRole('button', { name: 'secondary' });
+  expect(SecondaryButton).toHaveClass('Button--secondary');
+});
+
+test('should render error button', () => {
+  render(<Button variant="error">error</Button>);
+  const ErrorButton = screen.getByRole('button', { name: 'error' });
+  expect(ErrorButton).toHaveClass('Button--error');
+});
+
+test('should render button as link', () => {
+  render(<Button variant="link">link</Button>);
+  const LinkButton = screen.getByRole('button', { name: 'link' });
+  expect(LinkButton).toHaveClass('Link');
+});
+
+test('should render button as tag', () => {
+  render(<Button variant="tag">tag</Button>);
+  const TagButton = screen.getByRole('button', { name: 'tag' });
+  expect(TagButton).toHaveClass('Tag');
+});
+
+test('should handle <Icon /> as child', () => {
+  render(
+    <Button>
+      <Icon type="trash" />
+      Delete
+    </Button>
+  );
+  const button = screen.getByRole('button', { name: 'Delete' }).firstChild;
+  expect(button).toHaveClass('Icon--trash');
+});
+
+test('should handle "thin" modifier', () => {
+  render(<Button thin>link</Button>);
+  const button = screen.getByRole('button', { name: 'link' });
+  expect(button).toHaveClass('Button--thin');
+});
+
+test('should return no axe violations', async () => {
+  const { container } = render(
+    <>
+      <Button>primary</Button>
+      <Button variant="primary">primary</Button>
+      <Button variant="link">link</Button>
+      <Button>
+        <Icon type="bolt" />
+        scan
+      </Button>
+    </>
+  );
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});

packages/react/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "__tests__/setupTests.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "skipLibCheck": true