enzyme-to-react-testing-library

Migrate tests from using Enzyme to use React Testing Library

Example

# this plan was created using the RTL migration guide: https://testing-library.com/docs/react-testing-library/migrate-from-enzyme
steps:
  - name: 'Install RTL dependencies'
    tools:
      - name: delete_file_or_folder
        arguments:
          path_to_target: package-lock.json
      - name: run_terminal_command
        arguments:
          command: npm install --save-dev @testing-library/react@12 @testing-library/jest-dom

  - name: 'Update Jest configuration'
    tools:
      - name: edit_file
        arguments:
          path_to_file: 'jest.config.js'
          edit_prompt: |
            Remove setupFiles from the configuration

  - name: Build context graph
    tools:
      - name: build_dependency_graph_with_ai
        arguments:
          dependency_prompt: |
            You should find all imports for every file to provide complete context.
          exclude_path_patterns:
            - '/node_modules/**'

  - name: 'Convert Enzyme test files to RTL test files'
    tools:
      - name: find_files_by_name_with_regex
        arguments:
          find_file_name_pattern: .*\.test\.js$
        returns: testFiles
      - name: async_each
        items: '{{ testFiles }}'
        each_item:
          item_name: testFile
          tools:
            - name: get_file_long_context
              arguments:
                path_to_file: '{{ testFile }}'
                depth: 3
                graph_type: 'embedding'
              returns: file_context
            - name: edit_file
              arguments:
                path_to_file: '{{ testFile }}'
                edit_prompt: |
                  Import `'@testing-library/jest-dom'` so that the code has global access to `expect`

                  Refactor tests using react-testing-library to emphasize behavior checks rather than implementation specifics. 

                  Retain the original test count and descriptions.

                  Remove any test that depends on a snapshot comparison and replace it with the following comment:
                  ```
                  // SECOND: "<< name of test >>"" was removed because it tests snapshot comparisons which is an anti-pattern in RTL
                  ```

                  Never assign a variable or constant to the result of `render(Component)`.  Always use `screen.getByRole()` for top-level dom access.

                  Additional context:
                  {{ file_context }}
            - name: edit_file
              arguments:
                path_to_file: '{{ testFile }}'
                edit_prompt: |
                  For every occurrence of `getByRole()` that is accessing a DOM element with the "form" role or "status" role, please add the following comment above it:

                  ```
                  // SECOND: Please add a role="< role >" attribute to this element in the React component so that it can be selected.
                  ```