chore: migrates tests from Enzyme/Mocha to Vitest and React Testing Library by chrisvogt · Pull Request #94 · godaddy/react-img-carousel

chrisvogt · 2026-02-11T04:42:33Z

Summary

Migrates the test framework from Enzyme/Mocha/Chai/Sinon/NYC to Vitest and React Testing Library, replacing deprecated tooling with modern, actively maintained alternatives.

Changes

Test framework

Replaced Mocha (runner), Chai (assertions), Sinon (mocking), and NYC (coverage) with Vitest
Replaced Enzyme with React Testing Library
Using happy-dom for fast DOM simulation
New scripts: test:watch (watch mode) and test:ui (Vitest UI)

Source files

Renamed source files containing JSX from .js to .jsx, enabling native esbuild transforms
Removed orphaned webpack.config.js (referenced a missing react-svg-loader dependency; Storybook uses its own config)

Dependencies

Removed: enzyme, @cfaester/enzyme-adapter-react-18, mocha, chai, sinon, sinon-chai, nyc, @babel/register, eslint-plugin-mocha, jsdom, vite-plugin-babel, cheerio override
Added: vitest, @vitest/ui, @vitest/coverage-v8, @testing-library/react, @testing-library/user-event, @testing-library/jest-dom, happy-dom

Housekeeping

Added .npmrc with legacy-peer-deps=true for streamlined installation
Bumped version to 3.0.1

Performance

Metric	Mocha + Enzyme (before)	Vitest + Testing Library (after)
Tests	24 passing	24 passing
Test execution	103ms	166ms
Total duration	962ms	437ms
Wall clock time	0.962s	0.646s

33% faster end-to-end, primarily from replacing Babel transforms with native esbuild (5x faster) and using happy-dom over jsdom.

Note

The rename from .js to .jsx is required because Vite (which powers Vitest) uses esbuild for transforms, and esbuild will not parse JSX syntax in .js files by default. Without the rename, we would need to route all files through a Babel plugin (vite-plugin-babel) just to handle JSX — negating the performance benefits of switching to Vitest in the first place. Using .jsx extensions lets esbuild handle the transforms natively, which is what brought the transform step from 264ms down to 53ms. This is also the recommended convention from Vite and aligns with broader ecosystem conventions for distinguishing files that contain JSX.

This rename also lays the groundwork for a potential future migration of the build step from Babel to Vite (vite build), and Storybook from Webpack to the Storybook Vite builder. That would allow us to drop @babel/cli, @babel/core, @babel/preset-env, @babel/preset-react, @babel/plugin-transform-runtime, babel-loader, babel-plugin-inline-react-svg, @storybook/addon-webpack5-compiler-babel, @storybook/react-webpack5, @svgr/webpack, css-loader, less-loader, and style-loader — unifying the entire toolchain on Vite and significantly reducing the dependency footprint.

Motivation

Enzyme is deprecated and unmaintained; it required a community adapter just to work with React 18 and will never support React 19
React Testing Library is the recommended testing approach from the React team, encouraging tests that verify behavior rather than implementation details
Vitest provides a modern all-in-one test runner with built-in coverage, watch mode, and UI
Reducing the number of test-related dependencies simplifies maintenance

Notes

Coverage output still writes to the coverage/ directory with json-summary format, so external tools that read from there should continue to work
No changes to component behavior or public API
All 24 tests migrated and passing

test/unit/carousel.tests.jsx

Copilot

Pull request overview

Migrates the project’s test stack from Enzyme/Mocha/Chai/Sinon/NYC to Vitest + React Testing Library (with happy-dom), modernizing tooling and updating related scripts/config.

Changes:

Added Vitest configuration (globals, happy-dom, setup file, coverage) and updated npm scripts for run/watch/ui/coverage.
Replaced Enzyme-based tests with RTL + Vitest tests (including updated setup).
Removed legacy Webpack SVG config and deprecated test dependencies; added a repo .npmrc to ease installs.

Reviewed changes

Copilot reviewed 12 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
webpack.config.js	Removed orphaned Webpack SVG loader config no longer used.
vitest.config.js	Added Vitest config (happy-dom env, setup file, coverage settings).
test/unit/carousel.tests.jsx	Migrated Carousel unit tests from Enzyme/Mocha to RTL/Vitest.
test/unit/carousel.tests.js	Removed old Enzyme/Mocha test suite.
test/setup.js	Simplified test setup for RTL/Vitest (jest-dom + setImmediate polyfill).
src/stories/CustomArrows.jsx	Minor syntax/format fix (adds missing semicolon).
src/index.jsx	Normalized class-field method terminators to `};` for arrow properties.
package.json	Updated scripts/deps for Vitest + RTL; bumped version to 3.0.1.
CHANGELOG.md	Added 3.0.1 entry documenting testing migration.
.npmrc	Added `legacy-peer-deps=true` to streamline installation.
.npmignore	Removed NYC output ignore entry since NYC is removed.
.eslintrc	Declared Vitest globals for linting tests.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-11T19:22:54Z

test/unit/carousel.tests.jsx

waitFor may re-run the callback multiple times; triggering goToSlide(1) inside it can cause repeated state updates and flaky behavior. Move the state-changing action (slidingCarousel.goToSlide(1)) outside waitFor (wrapped in act), and keep waitFor for assertions only.

Copilot · 2026-02-11T19:22:54Z

test/unit/carousel.tests.jsx

Similar to the prior test: calling noneCarousel.goToSlide(1) inside waitFor can be executed multiple times and make the test flaky. Call noneCarousel.goToSlide(1) once before waitFor, then use waitFor only to assert track.style.transition.

Suggested change

await waitFor(() => {

noneCarousel.goToSlide(1);

act(() => {

noneCarousel.goToSlide(1);

});

await waitFor(() => {

Copilot · 2026-02-11T19:22:54Z

test/unit/carousel.tests.jsx

+let imagesFetched;
+
+global.Image = class MyImage {
+  set src(val) {
+    imagesFetched.push(val);
+    this.onload && this.onload();
+  }
+};


This overrides global.Image for the entire test runtime and isn’t restored, which can leak into other test files and cause surprising failures. Store the original global.Image and restore it in afterAll (or afterEach if needed).

Copilot · 2026-02-11T19:22:55Z

test/unit/carousel.tests.jsx

Using real timers (setTimeout) makes the test slower and can be flaky on slower/loaded CI. Prefer vi.useFakeTimers() + vi.advanceTimersByTime(20) (and vi.useRealTimers() cleanup) so the test is deterministic.

Suggested change

await new Promise(resolve => setTimeout(resolve, 20));

vi.useFakeTimers();

await act(async () => {

vi.advanceTimersByTime(20);

});

vi.useRealTimers();

Copilot · 2026-02-11T19:22:55Z

test/unit/carousel.tests.jsx

Asserting exact outerHTML is brittle across DOM implementations (happy-dom vs jsdom) and React attribute serialization differences. Prefer asserting behavior/attributes (e.g., toBeDisabled(), toHaveClass(...), toHaveAttribute('type','button')) rather than the full serialized HTML string.

Suggested change

expect(topArrow.outerHTML).toBe('<button type="button" disabled="" class="carousel-arrow carousel-top-arrow carousel-arrow-default"></button>');

expect(bottomArrow).toBeTruthy();

expect(bottomArrow.outerHTML).toBe('<button type="button" class="carousel-arrow carousel-bottom-arrow carousel-arrow-default"></button>');

expect(topArrow.tagName).toBe('BUTTON');

expect(topArrow).toHaveAttribute('type', 'button');

expect(topArrow).toHaveClass('carousel-arrow', 'carousel-top-arrow', 'carousel-arrow-default');

expect(topArrow).toBeDisabled();

expect(bottomArrow).toBeTruthy();

expect(bottomArrow.tagName).toBe('BUTTON');

expect(bottomArrow).toHaveAttribute('type', 'button');

expect(bottomArrow).toHaveClass('carousel-arrow', 'carousel-bottom-arrow', 'carousel-arrow-default');

expect(bottomArrow).not.toBeDisabled();

Copilot · 2026-02-11T19:22:55Z

test/unit/carousel.tests.jsx

Correct spelling in the test name from 'carousal' to 'carousel' to match the component name and avoid confusion.

Copilot · 2026-02-11T19:22:55Z

test/unit/carousel.tests.jsx

Correct spelling in the test name from 'carousal' to 'carousel' to match the component name and avoid confusion.

Copilot · 2026-02-11T19:22:56Z

.npmrc

Enabling legacy-peer-deps repo-wide can mask genuine peer dependency conflicts and make installs diverge from typical consumer environments. Consider removing this file and documenting an opt-in install command (or addressing specific peer dependency issues directly) so CI and local installs fail fast on real peer problems.

Suggested change

legacy-peer-deps=true

# Do not enable legacy-peer-deps repo-wide; use `npm install --legacy-peer-deps` explicitly if absolutely necessary.

chrisvogt added 5 commits February 10, 2026 20:24

chore(tests): migrates from now-deprecated Enzyme to Vitest

61bf7e5

SQUASHME: fixup missing dep

67be018

SQUASHME: remove legacy nyc directory

801311e

SQUASHME: renames files to enable native esbuild transforms

10d73a9

SQUASHME: remove unused packages

6120826

jsanthosh-godaddy reviewed Feb 11, 2026

View reviewed changes

test/unit/carousel.tests.jsx Outdated Show resolved Hide resolved

SQUASHME: no need to import globals + lint fixes

7bde905

chrisvogt requested a review from jsanthosh-godaddy February 11, 2026 18:53

chinrichs-godaddy requested a review from Copilot February 11, 2026 19:20

Copilot AI reviewed Feb 11, 2026

View reviewed changes

chrisvogt added 2 commits February 11, 2026 11:32

SQUASHME: merge in origin/main

2d49c0f

SQUASHME: resolve all Copilot comments

4cba2f3

jsanthosh-godaddy approved these changes Feb 11, 2026

View reviewed changes

chinrichs-godaddy approved these changes Feb 11, 2026

View reviewed changes

chinrichs-godaddy merged commit 99f7c39 into godaddy:main Feb 11, 2026
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: migrates tests from Enzyme/Mocha to Vitest and React Testing Library#94

chore: migrates tests from Enzyme/Mocha to Vitest and React Testing Library#94
chinrichs-godaddy merged 8 commits intogodaddy:mainfrom
chrisvogt:migrate-to-vitest

chrisvogt commented Feb 11, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Copilot AI Feb 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

-    await waitFor(() => {
-      noneCarousel.goToSlide(1);
+    act(() => {
+      noneCarousel.goToSlide(1);
+    });
+    await waitFor(() => {

-    await new Promise(resolve => setTimeout(resolve, 20));
+    vi.useFakeTimers();
+    await act(async () => {
+      vi.advanceTimersByTime(20);
+    });
+    vi.useRealTimers();

-      expect(topArrow.outerHTML).toBe('<button type="button" disabled="" class="carousel-arrow carousel-top-arrow carousel-arrow-default"></button>');
-      expect(bottomArrow).toBeTruthy();
-      expect(bottomArrow.outerHTML).toBe('<button type="button" class="carousel-arrow carousel-bottom-arrow carousel-arrow-default"></button>');
+      expect(topArrow.tagName).toBe('BUTTON');
+      expect(topArrow).toHaveAttribute('type', 'button');
+      expect(topArrow).toHaveClass('carousel-arrow', 'carousel-top-arrow', 'carousel-arrow-default');
+      expect(topArrow).toBeDisabled();
+      expect(bottomArrow).toBeTruthy();
+      expect(bottomArrow.tagName).toBe('BUTTON');
+      expect(bottomArrow).toHaveAttribute('type', 'button');
+      expect(bottomArrow).toHaveClass('carousel-arrow', 'carousel-bottom-arrow', 'carousel-arrow-default');
+      expect(bottomArrow).not.toBeDisabled();

	legacy-peer-deps=true
	# Do not enable legacy-peer-deps repo-wide; use `npm install --legacy-peer-deps` explicitly if absolutely necessary.

Conversation

chrisvogt commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test framework

Source files

Dependencies

Housekeeping

Performance

Motivation

Notes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

chrisvogt commented Feb 11, 2026 •

edited

Loading