Merge pull request #215 from sparksuite/catch-up-to-speed

Update all packages + replace Enzyme with Testing Library

Author: WesCossick

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 .DS_Store
 yarn-debug.log*
 yarn-error.log*
+.eslintcache

demo/package.json

@@ -4,18 +4,18 @@
 	"homepage": ".",
 	"dependencies": {
 		"@testing-library/jest-dom": "^5.0.0",
-		"@testing-library/react": "^10.0.0",
-		"@testing-library/user-event": "^10.0.0",
-		"@types/jest": "^25.1.0",
-		"@types/node": "^13.1.0",
-		"@types/react": "^16.9.0",
-		"@types/react-dom": "^16.9.0",
+		"@testing-library/react": "^11.2.2",
+		"@testing-library/user-event": "^12.2.2",
+		"@types/jest": "^26.0.15",
+		"@types/node": "^14.0.0",
+		"@types/react": "^17.0.0",
+		"@types/react-dom": "^17.0.0",
 		"prettier": "^2.0.2",
-		"react": "^16.12.0",
+		"react": "^17.0.1",
 		"react-accessible-dropdown-menu-hook": "link:..",
-		"react-dom": "^16.12.0",
-		"react-scripts": "3.4.1",
-		"typescript": "^3.8.3"
+		"react-dom": "^17.0.1",
+		"react-scripts": "4.0.1",
+		"typescript": "^4.1.2"
 	},
 	"scripts": {
 		"start": "react-scripts start",

demo/src/app.test.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import App from './app';
 
 // Tests
-it('renders', () => {
+it('Renders', () => {
 	const div = document.createElement('div');
 	ReactDOM.render(<App />, div);
 });

demo/tsconfig.json

@@ -13,7 +13,8 @@
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"noEmit": true,
-		"jsx": "react"
+		"jsx": "react-jsx",
+		"noFallthroughCasesInSwitch": true
 	},
 	"include": ["src"]
 }

demo/yarn.lock

@@ -1,6 +1,6 @@
 {
 	"name": "react-accessible-dropdown-menu-hook",
-	"version": "2.1.2",
+	"version": "2.2.0",
 	"description": "A simple Hook for creating fully accessible dropdown menus in React",
 	"main": "dist/use-dropdown-menu.js",
 	"types": "dist/use-dropdown-menu.d.ts",
@@ -47,28 +47,27 @@
 		"@babel/preset-env": "^7.7.6",
 		"@babel/preset-react": "^7.7.4",
 		"@babel/preset-typescript": "^7.7.4",
-		"@types/enzyme": "^3.10.4",
-		"@types/enzyme-adapter-react-16": "^1.0.5",
+		"@testing-library/jest-dom": "^5.11.6",
+		"@testing-library/react": "^11.2.2",
+		"@testing-library/user-event": "^12.2.2",
 		"@types/jest": "^26.0.3",
 		"@types/jest-environment-puppeteer": "^4.3.1",
-		"@types/react": "^16.9.16",
-		"@typescript-eslint/eslint-plugin": "^2.11.0",
-		"@typescript-eslint/parser": "^2.11.0",
+		"@types/react": "^17.0.0",
+		"@typescript-eslint/eslint-plugin": "^4.8.2",
+		"@typescript-eslint/parser": "^4.8.2",
 		"babel-jest": "link:./demo/node_modules/babel-jest",
-		"enzyme": "^3.10.0",
-		"enzyme-adapter-react-16": "^1.15.1",
-		"eslint": "^6.7.2",
+		"eslint": "^7.14.0",
 		"eslint-config-prettier": "^6.7.0",
 		"eslint-plugin-react": "^7.17.0",
 		"eslint-plugin-react-hooks": "^4.0.0",
 		"jest": "link:./demo/node_modules/jest",
 		"jest-puppeteer": "^4.3.0",
 		"prettier": "^2.0.2",
-		"puppeteer": "^2.0.0",
+		"puppeteer": "^5.5.0",
 		"react": "link:./demo/node_modules/react",
 		"react-dom": "link:./demo/node_modules/react-dom",
-		"react-test-renderer": "^16.12.0",
-		"typescript": "^4.0.2"
+		"react-test-renderer": "^17.0.1",
+		"typescript": "^4.1.2"
 	},
 	"jest": {
 		"collectCoverage": true,
@@ -79,7 +78,7 @@
 		"verbose": true,
 		"projects": [
 			{
-				"displayName": "Enzyme",
+				"displayName": "Testing Library",
 				"setupFilesAfterEnv": [
 					"<rootDir>/test/setupTests.ts"
 				],

package.json

@@ -11,6 +11,7 @@ interface ButtonProps
 }
 
 // A custom Hook that abstracts away the listeners/controls for dropdown menus
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export default function useDropdownMenu(itemCount: number) {
 	// Use state
 	const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -24,7 +25,7 @@ export default function useDropdownMenu(itemCount: number) {
 
 	// Initialize refs and update them when the item count changes
 	useEffect(() => {
-		itemRefs.current = [...Array(itemCount)].map(() => createRef<HTMLAnchorElement>());
+		itemRefs.current = [...Array<undefined>(itemCount)].map(() => createRef<HTMLAnchorElement>());
 	}, [itemCount]);
 
 	// Create type guard
@@ -187,7 +188,7 @@ export default function useDropdownMenu(itemCount: number) {
 		'aria-expanded': isOpen,
 	};
 
-	const itemProps = [...Array(itemCount)].map((ignore, index) => ({
+	const itemProps = [...Array<undefined>(itemCount)].map((_ignore, index) => ({
 		onKeyDown: itemListener,
 		tabIndex: -1,
 		role: 'menuitem',

src/use-dropdown-menu.ts

@@ -26,18 +26,18 @@ beforeEach(async () => {
 	});
 });
 
-it('has the correct page title', async () => {
+it('Has the correct page title', async () => {
 	await expect(page.title()).resolves.toMatch('React Accessible Dropdown Menu Hook');
 });
 
-it('leaves focus on the button after clicking it', async () => {
+it('Leaves focus on the button after clicking it', async () => {
 	await page.click('#menu-button');
 	await menuOpen();
 
 	expect(await currentFocusID()).toBe('menu-button');
 });
 
-it('focuses on the menu button after pressing escape', async () => {
+it('Focuses on the menu button after pressing escape', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');
 	await menuOpen();
@@ -48,7 +48,7 @@ it('focuses on the menu button after pressing escape', async () => {
 	expect(await currentFocusID()).toBe('menu-button');
 });
 
-it('disables scroll by arrow key when menu is open', async () => {
+it('Disables scroll by arrow key when menu is open', async () => {
 	await page.setViewport({
 		width: 1000,
 		height: 500,
@@ -63,7 +63,7 @@ it('disables scroll by arrow key when menu is open', async () => {
 	expect(await page.evaluate(() => window.scrollY)).toBe(currentScrollY);
 });
 
-it('does not disable scroll by arrow key when menu is closed', async () => {
+it('Does not disable scroll by arrow key when menu is closed', async () => {
 	await page.setViewport({
 		width: 1000,
 		height: 500,
@@ -75,7 +75,7 @@ it('does not disable scroll by arrow key when menu is closed', async () => {
 	expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(currentScrollY);
 });
 
-it('focuses on the next item in the tab order after pressing tab', async () => {
+it('Focuses on the next item in the tab order after pressing tab', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');
 	await menuOpen();
@@ -86,7 +86,7 @@ it('focuses on the next item in the tab order after pressing tab', async () => {
 	expect(await currentFocusID()).toBe('first-footer-link');
 });
 
-it('focuses on the previous item in the tab order after pressing shift-tab', async () => {
+it('Focuses on the previous item in the tab order after pressing shift-tab', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');
 	await menuOpen();
@@ -98,7 +98,7 @@ it('focuses on the previous item in the tab order after pressing shift-tab', asy
 	expect(await currentFocusID()).toBe('menu-button');
 });
 
-it('closes the menu if you click outside of it', async () => {
+it('Closes the menu if you click outside of it', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');
 	await menuOpen();
@@ -109,7 +109,7 @@ it('closes the menu if you click outside of it', async () => {
 	expect(true).toBe(true);
 });
 
-it('leaves the menu open if you click inside of it', async () => {
+it('Leaves the menu open if you click inside of it', async () => {
 	await page.focus('#menu-button');
 	await page.keyboard.down('Enter');
 	await menuOpen();
@@ -135,7 +135,7 @@ it('leaves the menu open if you click inside of it', async () => {
 	expect(true).toBe(true);
 });
 
-it('reroutes enter presses on menu items as clicks', async () => {
+it('Reroutes enter presses on menu items as clicks', async () => {
 	let alertAppeared = false;
 
 	await page.focus('#menu-button');

test/puppeteer/demo.test.ts

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

test/setupTests.ts

@@ -37,7 +37,7 @@ const TestComponent: React.FC = () => {
 				Add Item
 			</button>
 
-			<span id='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
+			<span data-testid='is-open-indicator'>{isOpen ? 'true' : 'false'}</span>
 		</React.Fragment>
 	);
 };