react-bootstrap · kyletsang · Aug 11, 2024 · Jul 25, 2024 · Jul 26, 2024 · Jul 26, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,13 +4,9 @@ on:
   push:
     branches:
       - master
-      - bs3-dev
-      - bs4-dev
   pull_request:
     branches:
       - master
-      - bs3-dev
-      - bs4-dev
 
 permissions:
   contents: read
@@ -21,7 +17,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        browser: [ChromeHeadless, FirefoxHeadless]
+        browser: [chromium, firefox]
         os: [ubuntu-latest, windows-latest, macOS-latest]
     steps:
       - name: Checkout
@@ -33,25 +29,16 @@ jobs:
           node-version: 20.x
           cache: yarn
 
-      - 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
         env:
           YARN_CACHE_FOLDER: .cache/yarn
 
+      - 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 }}
 

diff --git a/package.json b/package.json
@@ -46,9 +46,9 @@
     "prepublishOnly": "npm run build",
     "release": "rollout",
     "start": "yarn --cwd www start",
-    "tdd": "karma start",
+    "tdd": "vitest",
     "test": "npm run lint && npm run test-browser",
-    "test-browser": "cross-env NODE_ENV=test karma start --single-run",
+    "test-browser": "vitest --run",
     "prepare": "husky"
   },
   "lint-staged": {
@@ -81,22 +81,20 @@
     "@babel/register": "^7.22.15",
     "@react-bootstrap/babel-preset": "^2.2.0",
     "@react-bootstrap/eslint-config": "^3.0.0",
-    "@testing-library/dom": "^10.1.0",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
-    "@types/chai": "^4.3.16",
     "@types/invariant": "^2.2.37",
     "@types/mocha": "^10.0.6",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@types/sinon": "^17.0.3",
-    "@types/sinon-chai": "^3.2.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/warning": "^3.0.3",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.0.4",
     "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
-    "chai": "^4.3.10",
     "chalk": "^4.1.2",
     "cherry-pick": "^0.5.0",
     "codecov": "^3.8.3",
@@ -110,34 +108,21 @@
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-mocha": "^10.4.3",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
     "execa": "^5.1.1",
     "fs-extra": "^10.1.0",
     "husky": "^9.0.11",
-    "karma": "^6.4.3",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-cli": "^2.0.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": "^15.2.7",
     "lodash": "^4.17.21",
-    "mocha": "^10.4.0",
+    "playwright": "^1.45.3",
     "prettier": "^3.3.2",
     "process": "^0.11.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sinon": "^18.0.0",
-    "sinon-chai": "^3.7.0",
-    "typescript": "^5.4.5",
-    "util": "^0.12.5",
-    "webpack": "^5.92.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.4",
+    "webpack": "^5.93.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.8",
@@ -154,5 +139,6 @@
   },
   "release": {
     "conventionalCommits": true
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }
diff --git a/test/.eslintrc b/test/.eslintrc
@@ -1,20 +1,10 @@
 {
-  "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,
-    "max-classes-per-file": "off"
-  }
+    "max-classes-per-file": "off",
+  },
 }
diff --git a/test/AccordionButtonSpec.tsx b/test/AccordionButtonSpec.tsx
@@ -1,48 +1,42 @@
-    import { fireEvent, render } from '@testing-library/react';
-import sinon from 'sinon';
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
 import AccordionButton from '../src/AccordionButton';
 import Accordion from '../src/Accordion';
 
 describe('<AccordionButton>', () => {
   it('Should have button as default component', () => {
-    const { getByTestId } = render(
-      <AccordionButton data-testid="test-accordion-button" />,
+    render(<AccordionButton data-testid="test-accordion-button" />);
+    expect(screen.getByTestId('test-accordion-button').tagName).toEqual(
+      'BUTTON',
     );
-    getByTestId('test-accordion-button')
-      .tagName.toLowerCase()
-      .should.equal('button');
-    getByTestId('test-accordion-button')
-      .getAttribute('type')!
-      .should.equal('button');
+    expect(
+      screen.getByTestId('test-accordion-button').getAttribute('type'),
+    ).toEqual('button');
   });
 
   it('Should allow rendering as different component', () => {
-    const { getByTestId } = render(
-      <AccordionButton data-testid="test-accordion-button" as="div" />,
-    );
-    getByTestId('test-accordion-button')
-      .tagName.toLowerCase()
-      .should.equal('div');
+    render(<AccordionButton data-testid="test-accordion-button" as="div" />);
+    expect(screen.getByTestId('test-accordion-button').tagName).toEqual('DIV');
   });
 
   it('Should call onClick', () => {
-    const onClickSpy = sinon.spy();
-    const { getByTestId } = render(
-      <AccordionButton data-testid="btn" onClick={onClickSpy} />,
-    );
-    fireEvent.click(getByTestId('btn'));
+    const onClickSpy = vi.fn();
+    render(<AccordionButton data-testid="btn" onClick={onClickSpy} />);
+    fireEvent.click(screen.getByTestId('btn'));
 
-    onClickSpy.should.be.calledOnce;
+    expect(onClickSpy).toBeCalledTimes(1);
   });
 
   it('Should have toggled aria-expanded attribute in alwaysOpen accordion', () => {
-    const onClickSpy = sinon.spy();
-    const { getByTestId } = render(
+    const onClickSpy = vi.fn();
+    render(
       <Accordion alwaysOpen>
         <AccordionButton data-testid="btn" onClick={onClickSpy} />
       </Accordion>,
     );
-    fireEvent.click(getByTestId('btn'));
-    getByTestId('btn').getAttribute('aria-expanded')!.should.equal('true');
+    fireEvent.click(screen.getByTestId('btn'));
+    expect(screen.getByTestId('btn').getAttribute('aria-expanded')).toEqual(
+      'true',
+    );
   });
 });