feat(unit-tests): replaced jest with vitest

## Because
- We have vite as a bundler, but are using Jest as a test runner for unit tests (which also includes having a whole set of babel-related dependencies to take care of)

## This commit
- Does a in-place replacement of the test runner for vitest, which also features the same API as jest, but runs much faster (82% faster)
- Updates the "merge-coverage" script file

README.md

@@ -30,13 +30,13 @@
 - [Installation](#installation)
 - [Roadmap](#roadmap)
 - [Issues](#issues)
-	- [🐛 Bugs](#-bugs)
-	- [💡 Feature Requests](#-feature-requests)
+  - [🐛 Bugs](#-bugs)
+  - [💡 Feature Requests](#-feature-requests)
 - [Tests](#tests)
-	- [Run all component tests](#run-all-component-tests)
-	- [Jest tests](#jest-tests)
-	- [Cypress component tests:](#cypress-component-tests)
-	- [End-to-end tests:](#end-to-end-tests)
+  - [Run all tests](#run-all-tests)
+  - [Unit tests](#unit-tests)
+  - [Cypress component tests:](#cypress-component-tests)
+  - [End-to-end tests:](#end-to-end-tests)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -115,23 +115,24 @@ a 👍. This helps maintainers prioritize what to work on.
 
 ## Tests
 
-There are two layers of tests written for this library:
+There are three layers of tests written for this library:
 
-- We use Jest and Cypress to do component testing.
-- The end-to-end tests are also made using the Cypress runner.
+- Unit tests: we use vitest
+- Component tests: we use cypress
+- End-to-end tests: we also use cypress
 
 To run the whole suite of tests, make sure you've done the steps in [installation](#installation), then:
 
-### Run all component tests
+### Run all tests
 
 ```sh
 npm run test
 ```
 
-### Jest tests
+### Unit tests
 
 ```sh
-npm run test:jest
+npm run test:unit
 ```
 
 ### Cypress component tests:
@@ -143,12 +144,5 @@ npm run test:ct
 ### End-to-end tests:
 
 ```sh
-# 1.1 Open Storybook
-npm run storybook
-
-# 1.2 Open Cypress
-npm run test:cypress
-
-# 2. Run them in Headless mode
 npm run test:e2e
 ```

config/setupVitest.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

cypress/test/hooks/use-auto-id.spec.tsx

@@ -0,0 +1,60 @@
+/*
+ * Please refer to the terms of the license agreement.
+ *
+ * (c) 2021 Feedzai, Rights Reserved.
+ */
+import React from "react";
+import { useAutoId } from "../../../src/hooks/useAutoId";
+
+function DemoComponent({ value = null, prefix }: { value?: string | null; prefix?: string }) {
+	const firstId = useAutoId(value, prefix);
+	const secondId = useAutoId();
+	return (
+		<div>
+			<p id={firstId}>A paragraph</p>
+			<span id={secondId}>An inline span element</span>
+		</div>
+	);
+}
+
+function FallbackDemo({
+	value = "jd-fallback-id",
+	prefix,
+}: {
+	value?: string | null;
+	prefix?: string;
+}) {
+	const id = useAutoId(value, prefix);
+	return <h1 id={id}>joaodias.me</h1>;
+}
+
+describe("useAutoId", () => {
+	it("should generate a unique ID value", () => {
+		cy.mount(<DemoComponent />);
+
+		cy.findByText("A paragraph")
+			.invoke("attr", "id")
+			.then((idOne) => {
+				cy.findByText("An inline span element").invoke("attr", "id").should("not.equal", idOne);
+			});
+	});
+
+	it("should generate a prefixed unique ID value", () => {
+		const expected = "js-a-prefix";
+		cy.mount(<DemoComponent value={undefined} prefix={expected} />);
+
+		cy.findByText("A paragraph").invoke("attr", "id").should("contain", expected);
+	});
+
+	it("uses a fallback ID", () => {
+		cy.mount(<FallbackDemo />);
+
+		cy.findByText("joaodias.me").should("have.id", "jd-fallback-id");
+	});
+
+	it("should return a prefixed fallback ID", () => {
+		cy.mount(<FallbackDemo prefix="js-prefix" value="423696e5" />);
+
+		cy.findByText("joaodias.me").should("have.id", "js-prefix--423696e5");
+	});
+});

cypress/test/hooks/use-focus.spec.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useFocus } from "../../../src";
+
+function Demo({ isFocused = false, onFocus }: { isFocused?: boolean; onFocus: () => void }) {
+	const [focused, setFocused] = useState(isFocused);
+
+	const buttonRef = useRef(null);
+
+	useFocus(buttonRef, focused);
+
+	const handleOnClick = useCallback(() => {
+		setFocused(true);
+	}, [setFocused]);
+
+	return (
+		<button ref={buttonRef} onFocus={onFocus} onClick={handleOnClick}>
+			Demo Button
+		</button>
+	);
+}
+
+it("does not focus on mount when false", () => {
+	cy.mount(<Demo isFocused={false} onFocus={cy.stub().as("onFocus")} />);
+
+	cy.get("@onFocus").should("not.have.been.called");
+});
+
+it("focuses on mount when true", () => {
+	cy.mount(<Demo isFocused={true} onFocus={cy.stub().as("onFocus")} />);
+
+	cy.get("@onFocus").should("have.been.called");
+});
+
+it("focuses when focus value changes to true", () => {
+	cy.mount(<Demo isFocused={false} onFocus={cy.stub().as("onFocus")} />);
+
+	cy.get("@onFocus").should("not.have.been.called");
+
+	cy.get("button").click();
+
+	cy.get("@onFocus").should("have.been.called");
+});

cypress/test/hooks/useTabbable.spec.tsx

@@ -3,6 +3,7 @@
  *
  * (c) 2021 Feedzai, Rights Reserved.
  */
+import React from "react";
 import { useTabbable } from "../../../src/hooks";
 
 const ELEMENT_PROPS = {
@@ -15,8 +16,10 @@ const ELEMENT_PROPS = {
 const DemoComponent = (hookProps: typeof ELEMENT_PROPS) => {
 	const tabbableProps = useTabbable(hookProps);
 	return (
-		<button type="button" {...tabbableProps}>A Button</button>
-	)
+		<button type="button" {...tabbableProps}>
+			A Button
+		</button>
+	);
 };
 
 describe("useTabbable", () => {
@@ -35,7 +38,7 @@ describe("useTabbable", () => {
 		const CUSTOM_PROPS: typeof props = {
 			...props,
 			disabled: true,
-		}
+		};
 
 		cy.mount(<DemoComponent {...CUSTOM_PROPS} />);
 
@@ -47,7 +50,7 @@ describe("useTabbable", () => {
 			...props,
 			focusable: false,
 			disabled: true,
-		}
+		};
 
 		cy.mount(<DemoComponent {...CUSTOM_PROPS} />);
 
@@ -60,23 +63,27 @@ describe("useTabbable", () => {
 				...props,
 				focusable: false,
 				disabled: false,
-			}
+			};
 
 			cy.mount(<DemoComponent {...CUSTOM_PROPS} />);
 
-			cy.findByRole("button").should("not.be.disabled").and("not.have.attr", "aria-disabled", "true");
+			cy.findByRole("button")
+				.should("not.be.disabled")
+				.and("not.have.attr", "aria-disabled", "true");
 		});
 
 		it("focusable", () => {
 			const CUSTOM_PROPS: typeof props = {
 				...props,
 				focusable: true,
 				disabled: false,
-			}
+			};
 
 			cy.mount(<DemoComponent {...CUSTOM_PROPS} />);
 
-			cy.findByRole("button").should("not.be.disabled").and("not.have.attr", "aria-disabled", "true");
+			cy.findByRole("button")
+				.should("not.be.disabled")
+				.and("not.have.attr", "aria-disabled", "true");
 		});
 	});
 });