refactor: migrate ArtistNationalityFilter spec from Enzyme to RTL #15294
+105
−81
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Migrates the ArtistNationalityFilter.jest.enzyme.tsx test to use React Testing Library instead of Enzyme, following the pattern used by other modern tests in the ArtworkFilters directory. This is part of the ongoing effort to modernize the test suite by moving away from Enzyme. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Removes the Enzyme version of the ArtistNationalityFilter test since it's been replaced with the React Testing Library version in the previous commit. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
anandaroop
changed the title
|
Co-authored-by: Claude |
|
ok, you and @damassi convinced me to try it too |
nickskalkin
approved these changes
Mar 13, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The type of this PR is: Test
Co-authored-by: Claude noreply@anthropic.com
This is my first time out with the Claude Code CLI (docs, announcement)
I use it here to take on some real drudgery: continuing the long-term migration of Jest specs from Enzyme to React Testing Library.
Full session transcript inside here…
My comments are prefaced with
>And Claude's are prefaced with
⏺╭────────────────────────────────────────────╮ │ ✻ Welcome to Claude Code research preview! │ ╰────────────────────────────────────────────╯ ██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝ ██║ ██║ ███████║██║ ██║██║ ██║█████╗ ██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝ ╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗ ╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ ██████╗ ██████╗ ██████╗ ███████╗ ██╔════╝██╔═══██╗██╔══██╗██╔════╝ ██║ ██║ ██║██║ ██║█████╗ ██║ ██║ ██║██║ ██║██╔══╝ ╚██████╗╚██████╔╝██████╔╝███████╗ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ Browser didn't open? Use the url below to sign in: [redacted] ╭────────────────────────────────────────────╮ │ ✻ Welcome to Claude Code research preview! │ │ │ │ /help for help │ │ │ │ cwd: /Users/roop/src/artsy/force │ ╰────────────────────────────────────────────╯ Tips for getting started: 1. Run /init to create a CLAUDE.md file with instructions for Claude. 2. Ask Claude questions about your codebase. 3. Ask Claude to implement changes to your codebase. > What does this project do? ⏺ Task(Please search the repository for information about what this project is and what it does. Look in … README.md, package.json, and any other documentation files that might explain the purpose of the project.) ⎿ Done (4 tool uses · 28.9k tokens · 16.1s) ⏺ Artsy's Force is the codebase for http://www.artsy.net, an online art marketplace and platform for discovering, buying, and selling art. It's built with React, Relay (GraphQL), and TypeScript, using an isomorphic architecture that renders on both server and client. The project was open-sourced in 2014 as part of Artsy's "Open Source by Default" engineering principle. > What does this project use for tests? ⏺ Task(Search for testing frameworks and tools used in this project. Look in package.json for testing … dependencies, and check for test configuration files like jest.config.js, cypress.config.ts, or similar files. Also look for any test-related scripts in package.json.) ⎿ Done (11 tool uses · 36.5k tokens · 30.6s) ⏺ The project uses several testing frameworks: 1. Jest for unit and integration tests (main config in jest.config.js, legacy in jest.legacy.config.js) 2. React Testing Library for component testing 3. Enzyme for legacy component tests 4. Cypress for end-to-end testing (config in cypress.config.ts, tests in cypress/e2e/) 5. Custom testing utilities in the DevTools directory Testing scripts are available in package.json, including "test", "jest", "jest-enzyme", and "test:smoke" for running Cypress E2E tests. > Ok, this project needs to upgrade its legacy Enzyme tests to RTL. In the directory src/Components/ArtworkFilter/ArtworkFilters there is a mix of RTL and Enzyme specs. Consider src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistSeriesFilter.jest.tsx and src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtworkLocationFilter.jest.tsx as examples of modern RTL specs. Your task is to update src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx by creating a new src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx spec file based on the more modern patterns. ⏺ I'll help you update the Enzyme test to use React Testing Library. I'll first check the existing Enzyme test and the RTL examples you mentioned, then create the new RTL test file. ⏺ Task(Please examine the following files:…)… ⎿ Done (6 tool uses · 27.4k tokens · 30.7s) ⏺ Now I'll create the new RTL test file for ArtistNationalityFilter: ⏺ List(path: "src/Components/ArtworkFilter/ArtworkFilters/__tests__")… ⎿ - /Users/roop/src/artsy/force/ - src/ - Components/ - ArtworkFilter/ ... (+24 items) ⏺ Read(file_path: … "src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx") ⎿ import { type Aggregations, ArtworkFilterContextProvider, ... (+79 lines) ⏺ Read(file_path: "src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistSeriesFilter.jest.tsx")… ⎿ import { screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import type { ArtworkFilterContextProps } from "Components/ArtworkFilter/ArtworkFilterContext" ... (+69 lines) ⏺ Read(file_path: "src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtworkLocationFilter.jest.tsx")… ⎿ import { screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import type { ArtworkFilterContextProps } from "Components/ArtworkFilter/ArtworkFilterContext" ... (+173 lines) ⏺ Read(file_path: "src/Components/ArtworkFilter/ArtworkFilters/ArtistNationalityFilter.tsx")… ⎿ import { SelectedFiltersCountsLabels } from "Components/ArtworkFilter/ArtworkFilterContext" import type React from "react" import { ResultsFilter } from "./ResultsFilter" ... (+20 lines) ⏺ Read(file_path: "src/Components/ArtworkFilter/ArtworkFilters/__tests__/Utils.tsx")… ⎿ import { type RenderOptions, render as originalRender, ... (+150 lines) ⏺ Now I'll create the new RTL test file for the ArtistNationalityFilter component: ⏺ Write(file_path: src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx)… ⎿ Wrote 94 lines to src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx import { screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import type { ArtworkFilterContextProps } from "Components/ArtworkFilter/ArtworkFilterContext" import { ArtistNationalityFilter } from "Components/ArtworkFilter/ArtworkFilters/ArtistNationalityFilter" import { createArtworkFilterTestRenderer, currentArtworkFilterContext, } from "Components/ArtworkFilter/ArtworkFilters/__tests__/Utils" const artworkFilterContext: Partial = { ... (+84 lines) ⏺ I've created a new RTL-based test file for the ArtistNationalityFilter component that follows the same patterns as the example files you provided (ArtistSeriesFilter.jest.tsx and ArtworkLocationFilter.jest.tsx). The main changes from the Enzyme test to the RTL version: 1. Replaced Enzyme imports with React Testing Library's screen and userEvent utilities 2. Used the createArtworkFilterTestRenderer and currentArtworkFilterContext helpers 3. Changed assertions to use RTL's user-centric approach (e.g., screen.getByText() instead of finding DOM elements) 4. Added additional tests for updating context on filter changes and clearing filter state 5. Kept the same core test scenarios but implemented them with RTL's testing philosophy The new test file maintains the same functionality as the old Enzyme test but is now consistent with the modern RTL testing patterns used in the codebase. > Run the test and make sure it passes ⏺ I'll run the test to make sure it passes: ⏺ Bash(cd /Users/roop/src/artsy/force && yarn jest … src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx) ⎿ yarn run v1.22.22 $ node_modules/.bin/jest --config jest.config.js src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx jest-haste-map: duplicate manual mock found: CreditCardPicker.d The following files share their name; please delete one of them: * /.cache/tsc/src/Apps/Order/Components/__mocks__/CreditCardPicker.d.ts * /.cache/tsc/Apps/Order/Components/__mocks__/CreditCardPicker.d.ts jest-haste-map: duplicate manual mock found: BankDebitProvider.d The following files share their name; please delete one of them: * /.cache/tsc/src/Apps/Order/Components/__mocks__/BankDebitProvider.d.ts * /.cache/tsc/Apps/Order/Components/__mocks__/BankDebitProvider.d.ts jest-haste-map: duplicate manual mock found: useSaveArtwork.d The following files share their name; please delete one of them: * /.cache/tsc/src/Apps/ArtQuiz/Hooks/__mocks__/useSaveArtwork.d.ts * /.cache/tsc/Apps/ArtQuiz/Hooks/__mocks__/useSaveArtwork.d.ts jest-haste-map: duplicate manual mock found: useUpdateQuiz.d The following files share their name; please delete one of them: * /.cache/tsc/src/Apps/ArtQuiz/Hooks/__mocks__/useUpdateQuiz.d.ts * /.cache/tsc/Apps/ArtQuiz/Hooks/__mocks__/useUpdateQuiz.d.ts jest-haste-map: duplicate manual mock found: useDislikeArtwork.d The following files share their name; please delete one of them: * /.cache/tsc/src/Apps/ArtQuiz/Hooks/__mocks__/useDislikeArtwork.d.ts ... (+3 lines) The following files share their name; please delete one of them: * /.cache/tsc/src/Components/Pagination/__mocks__/useComputeHref.d.ts * /.cache/tsc/Components/Pagination/__mocks__/useComputeHref.d.ts jest-haste-map: duplicate manual mock found: RouteTabs.d The following files share their name; please delete one of them: * /.cache/tsc/src/Components/__mocks__/RouteTabs.d.ts * /.cache/tsc/Components/__mocks__/RouteTabs.d.ts jest-haste-map: duplicate manual mock found: logger.d The following files share their name; please delete one of them: * /.cache/tsc/src/Utils/__mocks__/logger.d.ts * /.cache/tsc/Utils/__mocks__/logger.d.ts jest-haste-map: duplicate manual mock found: getCurrentTimeAsIsoString.d The following files share their name; please delete one of them: * /.cache/tsc/src/Utils/__mocks__/getCurrentTimeAsIsoString.d.ts * /.cache/tsc/Utils/__mocks__/getCurrentTimeAsIsoString.d.ts jest-haste-map: duplicate manual mock found: getENV.d The following files share their name; please delete one of them: * /.cache/tsc/src/Utils/__mocks__/getENV.d.ts * /.cache/tsc/Utils/__mocks__/getENV.d.ts Done in 4.32s. ⎿ PASS src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx ArtistNationalityFilter ✓ renders artist nationalities (183 ms) ✓ renders nothing when there are no nationalities (4 ms) ✓ updates context on filter change (128 ms) ✓ clears local input state after Clear All (109 ms) ✓ can render in expanded or collapsed state (21 ms) Test Suites: 1 passed, 1 total Tests: 5 passed, 5 total Snapshots: 0 total Time: 1.933 s Ran all test suites matching /src\/Components\/ArtworkFilter\/ArtworkFilters\/__tests__\/ArtistNationalityFilter.jest.tsx/i. ⏺ Great! All tests are passing. The new RTL test file for ArtistNationalityFilter has successfully replaced the Enzyme version. The test runs 5 test cases that verify: 1. Rendering artist nationalities when available 2. Rendering nothing when no nationalities are available 3. Updating context when filters change 4. Clearing input state after "Clear all" is clicked 5. Proper rendering in expanded or collapsed states This conversion follows Artsy's migration pattern for moving from Enzyme to React Testing Library, making the tests more user-centric and focused on testing behavior rather than implementation details. > These specs make use of a helper called createArtworkFilterTestRenderer(), can you explain how that works? ⏺ The createArtworkFilterTestRenderer() is a test helper function designed to simplify testing components that depend on the ArtworkFilterContext. Here's how it works: 1. Purpose: It creates a custom render function that wraps components in an ArtworkFilterContextProvider with predefined context values. 2. Implementation: - It takes a partial ArtworkFilterContextProps object as input - Returns a render function that uses RTL's render but with a custom wrapper - The wrapper includes: - ArtworkFilterContextProvider with your supplied context - A ClearAllButton component for testing reset functionality - The component being tested - An ArtworkFilterContextInspector that exposes context state for assertions 3. Key benefits: - Simplifies setup: You don't need to manually create context providers for every test - Standardizes test patterns: All filter tests follow the same rendering pattern - Integrates with context inspection: Works with currentArtworkFilterContext() to check state 4. How it's used in tests: - You define your test context (like filter aggregations) - Create a render function by calling createArtworkFilterTestRenderer(myContext) - Use that render function with your component - Interact with the component using RTL methods - Verify context state changes using currentArtworkFilterContext() It's a clean abstraction that encapsulates the complex setup of filter context, making tests more readable and focused on the behavior being tested rather than context setup details. > Commit the new spec to the repo and credit us both as co-authors ⏺ I'll commit the new spec file with both of us as co-authors: ⏺ Bash(cd /Users/roop/src/artsy/force && git add … src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx && git status) ⎿ On branch main Your branch is up to date with 'artsy/main'. Changes to be committed: (use "git restore --staged ..." to unstage) new file: src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx ⏺ Bash(cd /Users/roop/src/artsy/force && git commit -m "test: convert ArtistNationalityFilter test from Enzym… to RTL Migrates the ArtistNationalityFilter.jest.enzyme.tsx test to use React Testing Library instead of Enzyme, following the pattern used by other modern tests in the ArtworkFilters directory. This is part of the ongoing effort to modernize the test suite by moving away from Enzyme. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Co-Authored-By: Roop ") ⎿ No (tell Claude what to do differently) > Use my github account's email address to credit me: anandaroop.roy+github@gmail.com ⏺ I'll commit the new spec file using your GitHub email address: ⏺ Bash(cd /Users/roop/src/artsy/force && git commit -m "test: convert ArtistNationalityFilter test from Enzym… to RTL Migrates the ArtistNationalityFilter.jest.enzyme.tsx test to use React Testing Library instead of Enzyme, following the pattern used by other modern tests in the ArtworkFilters directory. This is part of the ongoing effort to modernize the test suite by moving away from Enzyme. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude Co-Authored-By: Anandaroop Roy ") ⎿ [main aa7470a92e] test: convert ArtistNationalityFilter test from Enzyme to RTL 1 file changed, 102 insertions(+) create mode 100644 src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx ⎿ husky > pre-commit (node v18.15.0) ⚠ Skipping backup because `--no-stash` was used. [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for * [STARTED] Running tasks for *.@(md) [STARTED] Running tasks for *.@(js|jsx|ts|tsx) [STARTED] yarn detect-secrets:hook [STARTED] yarn format [SUCCESS] yarn detect-secrets:hook [SUCCESS] Running tasks for * [SUCCESS] yarn format [SUCCESS] Running tasks for *.@(js|jsx|ts|tsx) [SUCCESS] Running tasks... [STARTED] Applying modifications... [SUCCESS] Applying modifications... ⏺ Great! I've successfully committed the new RTL-based test for the ArtistNationalityFilter component. The commit: 1. Adds the new RTL test file: src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx 2. Includes a descriptive commit message explaining the migration from Enzyme to RTL 3. Credits both Claude and you as co-authors (using your GitHub email address) 4. Passed the pre-commit hooks successfully (husky, detect-secrets, and formatting) The commit message explains that this is part of the ongoing effort to modernize the test suite by moving away from Enzyme, which aligns with the project's migration to React Testing Library. > Actually rewrite that commit and remove me as co-author ⏺ I'll rewrite the commit to remove you as co-author: ⏺ Bash(cd /Users/roop/src/artsy/force && git reset --soft HEAD~1 && git status)… ⎿ On branch anandaroop-claude/update-an-enzyme-spec Your branch is behind 'artsy/anandaroop-claude/update-an-enzyme-spec' by 1 commit, and can be fast-forwarded. (use "git pull" to update your local branch) Changes to be committed: (use "git restore --staged ..." to unstage) new file: src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx ⏺ Bash(cd /Users/roop/src/artsy/force && git commit -m "test: convert ArtistNationalityFilter test from Enzym… to RTL Migrates the ArtistNationalityFilter.jest.enzyme.tsx test to use React Testing Library instead of Enzyme, following the pattern used by other modern tests in the ArtworkFilters directory. This is part of the ongoing effort to modernize the test suite by moving away from Enzyme. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude ") ⎿ [anandaroop-claude/update-an-enzyme-spec 3dc208f6d1] test: convert ArtistNationalityFilter test from Enzyme to RTL 1 file changed, 102 insertions(+) create mode 100644 src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.tsx ⎿ husky > pre-commit (node v18.15.0) ⚠ Skipping backup because `--no-stash` was used. [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for * [STARTED] Running tasks for *.@(md) [STARTED] Running tasks for *.@(js|jsx|ts|tsx) [STARTED] yarn detect-secrets:hook [STARTED] yarn format [SUCCESS] yarn detect-secrets:hook [SUCCESS] Running tasks for * [SUCCESS] yarn format [SUCCESS] Running tasks for *.@(js|jsx|ts|tsx) [SUCCESS] Running tasks... [STARTED] Applying modifications... [SUCCESS] Applying modifications... ⏺ I've successfully rewritten the commit: 1. First, I used git reset --soft HEAD~1 to undo the previous commit while keeping the changes staged 2. Then I created a new commit with the modified message that only lists Claude as a co-author 3. The commit passed all pre-commit hooks again The new commit message maintains the description of the migration while only crediting Claude as the co-author. > Now remove the obsoleted spec and commit that change ⏺ I'll remove the obsolete Enzyme spec file and commit that change: ⏺ List(path: "src/Components/ArtworkFilter/ArtworkFilters/__tests__")… ⎿ - /Users/roop/src/artsy/force/ - src/ - Components/ - ArtworkFilter/ ... (+25 items) ⏺ Bash(cd /Users/roop/src/artsy/force && git rm … src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx) ⎿ rm 'src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx' ⏺ Bash(cd /Users/roop/src/artsy/force && git status)… ⎿ On branch anandaroop-claude/update-an-enzyme-spec Your branch is up to date with 'artsy/anandaroop-claude/update-an-enzyme-spec'. Changes to be committed: (use "git restore --staged ..." to unstage) deleted: src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx ⏺ Bash(cd /Users/roop/src/artsy/force && git commit -m "chore: remove obsolete Enzyme test for … ArtistNationalityFilter Removes the Enzyme version of the ArtistNationalityFilter test since it's been replaced with the React Testing Library version in the previous commit. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude ") ⎿ [anandaroop-claude/update-an-enzyme-spec 79d47dbc81] chore: remove obsolete Enzyme test for ArtistNationalityFilter 1 file changed, 81 deletions(-) delete mode 100644 src/Components/ArtworkFilter/ArtworkFilters/__tests__/ArtistNationalityFilter.jest.enzyme.tsx ⎿ husky > pre-commit (node v18.15.0) ⚠ Skipping backup because `--no-stash` was used. ℹ No staged files found. ⏺ Perfect! I've successfully: 1. Removed the obsolete Enzyme test file ArtistNationalityFilter.jest.enzyme.tsx 2. Committed the deletion with a clear commit message explaining that it's been replaced by the RTL version 3. Included Claude as a co-author in the commit message The change has been successfully committed to the branch. Now the repository has only the new React Testing Library version of the test, completing the migration for this component. ╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ > │ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ ! for bash mode · / for commands Backslash (\) + Return (⏎) for newline > /cost ⎿ Total cost: $1.07 Total duration (API): 3m 55.9s Total duration (wall): 1h 9m 33.6s Total code changes: 94 lines added, 0 lines removedTLDR: