Rewrite the instance-poking presentational tests with React Testing Library

[jonathangreen]

Description

Rewrites 22 enzyme suites that reached into class internals with instance()/setState()/state(): the announcement/color/table widgets, the complaint and troubleshooting views, the library/book/list edit forms, the diagnostics and reset-adobe panels, and ContextProvider.

Each internal poke becomes an observable assertion:

• instance() reads of computed values (Announcement.format, ClassificationsTable.readableType, ContextProvider methods) are driven through real inputs and asserted on the rendered DOM.
• setState()/instance-method calls become the user action that causes them — a checkbox click, a Save click, a tab click — with the assertion on the DOM that reflects the new state.
• Ref-based getValue() APIs (Autocomplete, ColorPicker) are exercised through a real ref, since production calls them that way.
• ContextProvider is rewritten around a capturing consumer child that reads the legacy context the component provides (pathFor/prepareCollectionUrl/prepareBookUrl), rather than the component instance. The legacy global.jsdom.reconfigure origin trick is dropped — those helpers strip only the origin, so the real jsdom origin yields the same encoded output.

Connected panels (Complaints, PatronAuthServices, SitewideAnnouncements, Classifications, BookDetailsEditor, CustomListsForBook, ResetAdobeId, SelfTests's category) render their connected default export with fetch stubbed and awaited, so mapStateToProps/mapDispatchToProps stay covered. The coverage gate caught two gaps: a Complaints type-format fallback (added a non-matching-type case) and SelfTests's own connect wiring, which only the SelfTestsTabContainer full-mount covered — so SelfTestsTabContainer is deferred (original retained) until SelfTests is migrated to render its connected export.

userEvent usage follows the const user = userEvent.setup() convention across tests/jest/.

Motivation and Context

Part of the mocha/chai/enzyme → jest/RTL migration. This tranche clears the suites that poked class internals — the ones whose translation is least mechanical, since each instance()/setState() has to be re-expressed as a user action and a DOM assertion.

How Has This Been Tested?

npm test — full suite green. Coverage rises to 94.68% (+38 lines over baseline), no previously-covered line lost.

Checklist:

• I have updated the documentation accordingly.
• All new and existing tests passed.

[claude]

Claude finished @jonathangreen's task in 3m 58s —— View job

---

Claude Code Review

• Gather PR context (diff, changed files)
• Review the migrated RTL tests for correctness & coverage fidelity
• Review test isolation, mocking, and connect-wiring coverage
• Post review feedback

Summary

This is a careful, high-quality tranche of the enzyme→RTL migration. The hard part — re-expressing each instance()/setState()/state() poke as a user action plus a DOM assertion — is done consistently and with useful explanatory comments. The choices around covering connect() wiring (rendering the connected default export with fetch stubbed and awaited, while injecting connect-derived props through the unconnected class where a real mount would reject an uncaught fetch) are sound and keep mapStateToProps/mapDispatchToProps covered. fetch spies are restored per suite, fresh Responses are returned where multiple fetches can occur, the userEvent.setup() convention is followed throughout, and no focused/skipped tests or stray console calls slipped in. I found only one minor test-design point; nothing blocking.

Details

Minor: tests/jest/components/ClassificationsTable.test.tsx:9-14

The test re-implements the component's own readableType regex and asserts the rendered cell equals readableType(c.type), i.e. it verifies the DOM against a copy of the very transformation under test. A total regression (e.g. the component stops stripping the prefix) is still caught, but a subtle bug in the regex that a maintainer replicates identically in this copy would pass unnoticed. Since the fixture is fixed and known, asserting the literal expected strings is both simpler and strictly stronger:

// classificationsData row: type "http://librarysimplified.org/terms/genres/Simplified/"
expect(cells[0].textContent).toBe("Simplified");

circulation-admin/tests/jest/components/ClassificationsTable.test.tsx

Lines 9 to 14 in ec398ca

	const readableType = (type: string) =>
	type.replace(
	/http:\/\/librarysimplified\.org\/terms\/genres\/([^/]+)\//,
	"$1"
	);

· chore/rewrite-instance-poking-test-rtl

[greptile-apps]

Greptile Summary

This PR rewrites legacy Enzyme component tests as React Testing Library tests. The main changes are:

• Moves instance-poking suites from src/components/__tests__ into tests/jest/components.
• Exercises form submits, clicks, refs, and connected Redux panels through rendered behavior.
• Adds a shared FormData shim for form submit tests.
• Adds direct coverage for the shared shim’s browser-like form serialization.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
tests/jest/testUtils/formDataShim.ts	Adds a shared FormData shim that models browser form serialization for the migrated submit tests.
tests/jest/testUtils/formDataShim.test.ts	Adds focused tests for disabled controls, unchecked controls, button inputs, multi-selects, and shim read/write methods.
tests/jest/components/BookEditForm.test.tsx	Migrates the book edit form tests to React Testing Library and uses the shared form submit shim.
tests/jest/components/SitewideAnnouncements.test.tsx	Migrates the connected announcements panel tests and checks the submitted announcements payload through the shared shim.
tests/jest/components/ComplaintForm.test.tsx	Migrates complaint form behavior tests to user-facing interactions with the shared form submit shim installed.
tests/jest/components/LibraryEditForm.test.tsx	Migrates library edit form tests and uses the shared form submit shim for payload assertions.
tests/jest/components/LibraryRegistrationForm.test.tsx	Migrates library registration form tests and installs the shared form submit shim consistently with sibling suites.

_{Reviews (6): Last reviewed commit: "Rewrite the instance-poking presentation..." | Re-trigger Greptile}

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.47%. Comparing base (7014b93) to head (ec398ca).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #315      +/-   ##
==========================================
+ Coverage   90.19%   90.47%   +0.27%     
==========================================
  Files         205      205              
  Lines        7610     7610              
  Branches     1664     1664              
==========================================
+ Hits         6864     6885      +21     
+ Misses        437      423      -14     
+ Partials      309      302       -7     

Flag	Coverage Δ
jest	90.47% <ø> (+0.27%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.