Migrate test off enzyme and karma (#104)

* WIP

* Migrate tests to RTL and vitest

* stuff

* lint clean up

* Update test/AnchorSpec.tsx

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

* Update ModalManagerSpec.ts

* platforms

* saf

---------

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        browser: [ChromeHeadless, FirefoxHeadless]
+        browser: [chromium, firefox]
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
       - name: Checkout
@@ -23,23 +23,14 @@ jobs:
         with:
           node-version: 20.x
 
-      - name: Update Brew (macOS)
-        if: matrix.os == 'macOS-latest'
-        run: brew update
-
-      - name: Install Chrome (macOS)
-        if: matrix.os == 'macOS-latest' && matrix.browser == 'ChromeHeadless'
-        run: brew install --cask google-chrome
-
-      - name: Install Firefox (macOS)
-        if: matrix.os == 'macOS-latest' && matrix.browser == 'FirefoxHeadless'
-        run: brew install --cask firefox
-
       - name: Install Dependencies
         run: yarn bootstrap
 
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+
       - name: Run Tests
-        run: yarn test
+        run: yarn test --browser.name=${{ env.BROWSER }} --browser.headless
         env:
           BROWSER: ${{ matrix.browser }}
 

package.json

@@ -52,13 +52,13 @@
     "build:pick": "cherry-pick --cwd=lib --input-dir=../src --cjs-dir=cjs --esm-dir=esm",
     "build:popper": "rollup src/popper.ts --file lib/cjs/popper.js --format cjs --name popper --plugin @rollup/plugin-node-resolve",
     "deploy-docs": "yarn --cwd www deploy",
-    "lint": "eslint www/*.js www/src src test *.js  --ext .js,.ts,.tsx",
+    "lint": "eslint www/*.js www/src src test *.ts  --ext .js,.ts,.tsx",
     "prepublishOnly": "yarn build",
     "release": "rollout",
     "start": "yarn --cwd www start",
-    "tdd": "cross-env NODE_ENV=test karma start",
+    "tdd": "vitest",
     "test": "yarn lint && yarn testonly",
-    "testonly": "yarn tdd --single-run"
+    "testonly": "yarn vitest --run"
   },
   "lint-staged": {
     "*.js,*.tsx": "eslint --fix --ext .js,.ts,.tsx"
@@ -98,66 +98,43 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@react-bootstrap/eslint-config": "^2.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/chai": "^4.3.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.3.1",
-    "@types/mocha": "^8.2.3",
-    "@types/react": "^17.0.47",
-    "@types/react-dom": "^17.0.17",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "^4.4.4",
-    "@types/sinon": "^10.0.11",
-    "@types/sinon-chai": "^3.2.8",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.0.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-preset-env-modules": "^1.0.1",
-    "chai": "^4.3.6",
     "cherry-pick": "^0.5.0",
     "cross-env": "^7.0.3",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.24.0",
     "eslint-config-4catalyzer-typescript": "^3.2.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-mocha": "^8.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^3.1.0",
     "hookem": "^1.0.9",
-    "karma": "^6.4.3",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage": "^2.2.1",
-    "karma-firefox-launcher": "^2.1.3",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-sinon-chai": "^2.0.2",
-    "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "5.0.1",
     "lint-staged": "^10.5.4",
-    "mocha": "^8.3.2",
+    "playwright": "^1.45.1",
     "prettier": "^2.7.1",
-    "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.10.1",
-    "simulant": "^0.2.2",
-    "sinon": "^13.0.1",
-    "sinon-chai": "^3.6.0",
-    "stream-browserify": "^3.0.0",
+    "rollup": "^4.18.1",
     "typescript": "^4.7.4",
-    "util": "^0.12.3",
-    "webpack": "^5.73.0",
-    "webpack-atoms": "^16.0.1",
-    "webpack-cli": "^4.1.0"
+    "vitest": "^2.0.2"
   },
   "bugs": {
     "url": "https://github.com/react-restart/ui/issues"

src/Dropdown.tsx

@@ -233,6 +233,7 @@ function Dropdown({
     }
 
     const first = qsa(menuRef.current!, itemSelector)[0];
+
     if (first && first.focus) first.focus();
   });
 

src/DropdownToggle.tsx

@@ -39,7 +39,7 @@ export function useDropdownToggle(): [
     menuElement,
   } = useContext(DropdownContext) || {};
   const handleClick = useCallback(
-    (e) => {
+    (e: Event | React.SyntheticEvent<Element, Event>) => {
       toggle(!show, e);
     },
     [show, toggle],

src/useClickOutside.ts

@@ -56,7 +56,7 @@ function useClickOutside(
   const waitingForTrigger = useRef(false);
 
   const handleMouseCapture = useCallback(
-    (e) => {
+    (e: any) => {
       const currentTarget = getRefTarget(ref);
 
       warning(

test/.eslintrc

@@ -1,22 +1,10 @@
 {
-  "extends": ["plugin:mocha/recommended"],
-  "env": {
-    "mocha": true
-  },
-  "globals": {
-    "assert": true,
-    "expect": true,
-    "sinon": true
-  },
-  "plugins": ["mocha"],
   "rules": {
     "no-script-url": 0,
     "no-unused-expressions": 0,
     "padded-blocks": 0,
     "react/no-multi-comp": 0,
     "react/prop-types": 0,
-    "mocha/no-exclusive-tests": 2,
-    "mocha/no-mocha-arrows": 0,
     "no-unused-vars": [2, { "varsIgnorePattern": "^_$" }]
   }
 }

test/AnchorSpec.tsx

@@ -1,64 +1,64 @@
 import { render, fireEvent } from '@testing-library/react';
-import sinon from 'sinon';
-import { expect } from 'chai';
+
+import { expect, describe, it, vi } from 'vitest';
 
 import Anchor from '../src/Anchor';
 
 describe('Anchor', () => {
   it('renders an anchor tag', () => {
     const { container } = render(<Anchor data-testid="anchor" />);
 
-    container.firstElementChild!.tagName.should.equal('A');
+    expect(container.firstElementChild!.tagName).toEqual('A');
   });
 
   it('forwards provided href', () => {
     const { container } = render(<Anchor href="http://google.com" />);
 
-    container
-      .firstElementChild!.getAttribute('href')!
-      .should.equal('http://google.com');
+    expect(container.firstElementChild!.getAttribute('href')!).to.equal(
+      'http://google.com',
+    );
   });
 
   it('ensures that a href is a hash if none provided', () => {
     const { container } = render(<Anchor />);
 
-    container.firstElementChild!.getAttribute('href')!.should.equal('#');
+    expect(container.firstElementChild!.getAttribute('href')!).to.equal('#');
   });
 
   it('forwards onClick handler', () => {
-    const handleClick = sinon.spy();
+    const handleClick = vi.fn();
 
     const { container } = render(<Anchor onClick={handleClick} />);
 
     fireEvent.click(container.firstChild!);
 
-    handleClick.should.have.been.calledOnce;
+    expect(handleClick).toHaveBeenCalledOnce();
   });
 
   it('provides onClick handler as onKeyDown handler for "space"', () => {
-    const handleClick = sinon.spy();
+    const handleClick = vi.fn();
 
     const { container } = render(<Anchor onClick={handleClick} />);
 
     fireEvent.keyDown(container.firstChild!, { key: ' ' });
 
-    handleClick.should.have.been.calledOnce;
+    expect(handleClick).toHaveBeenCalledOnce();
   });
 
   it('should call onKeyDown handler when href is non-trivial', () => {
-    const onKeyDownSpy = sinon.spy();
+    const onKeyDownSpy = vi.fn();
 
     const { container } = render(
       <Anchor href="http://google.com" onKeyDown={onKeyDownSpy} />,
     );
 
     fireEvent.keyDown(container.firstChild!, { key: ' ' });
 
-    onKeyDownSpy.should.have.been.calledOnce;
+    expect(onKeyDownSpy).toHaveBeenCalledOnce();
   });
 
   it('prevents default when no href is provided', () => {
-    const handleClick = sinon.spy();
+    const handleClick = vi.fn();
 
     const { container, rerender } = render(<Anchor onClick={handleClick} />);
 
@@ -68,21 +68,21 @@ describe('Anchor', () => {
 
     fireEvent.click(container.firstChild!);
 
-    expect(handleClick).to.have.been.calledTwice;
-    expect(handleClick.getCall(0).args[0].isDefaultPrevented()).to.be.true;
-    expect(handleClick.getCall(1).args[0].isDefaultPrevented()).to.be.true;
+    expect(handleClick).toHaveBeenCalledTimes(2);
+    expect(handleClick.mock.calls[0][0].isDefaultPrevented()).toEqual(true);
+    expect(handleClick.mock.calls[1][0].isDefaultPrevented()).toEqual(true);
   });
 
   it('does not prevent default when href is provided', () => {
-    const handleClick = sinon.spy();
+    const handleClick = vi.fn();
 
     fireEvent.click(
       render(<Anchor href="#foo" onClick={handleClick} />).container
         .firstChild!,
     );
 
-    expect(handleClick).to.have.been.calledOnce;
-    expect(handleClick.getCall(0).args[0].isDefaultPrevented()).to.be.false;
+    expect(handleClick).toHaveBeenCalledOnce();
+    expect(handleClick.mock.calls[0][0].isDefaultPrevented()).toEqual(false);
   });
 
   it('forwards provided role', () => {
@@ -108,6 +108,6 @@ describe('Anchor', () => {
       render(
         <Anchor href="http://google.com" />,
       ).container.firstElementChild!.hasAttribute('role'),
-    ).to.be.false;
+    ).toEqual(false);
   });
 });