enzyme-to-react-testing-library

Migrate tests from using Enzyme to use React Testing Library

Example

# TODO: Autoconverted via chatgpt. This has lots of hallucinations but should cover the basical logic from the original migration in code
# TODO: This is NOT ready for the real world
constants:
  customRender: 'libs/testing/testing-library-helpers'
  limit: 5

steps:
  - tools:
      - name: find_files_by_name_with_regex
        arguments:
          path_to_directory: '{{ projectRepoPath }}'
          find_file_name_pattern: '.*\\.test\\.js$'
        returns: files

  - tools:
      - name: for_each
        items: '{{ files }}'
        each_item:
          item_name: filePath
          tools:
            - name: get_content_from_file
              arguments:
                path_to_file: '{{ filePath }}'
              returns: fileContent

            - name: if_else
              condition: '{{ "enzyme" in fileContent }}'
              if:
                tools:
                  - name: get_content_from_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                    returns: htmlStr

                  - name: get_content_from_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                    returns: imports

                  - name: edit_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                      edit_prompt: |
                        Refactor tests using react-testing-library to emphasize behavior checks rather than implementation specifics. 
                        Retain the original test count and descriptions.
                        Disregard the initial test content. Comprehend the test's intent and use {{ htmlStr }} for precise browser rendering when forming the test.
                        Refer to the component's source code {{ imports }} while crafting the tests.
                    returns: newContent

                  - name: validate
                    arguments:
                      path_to_file: '{{ filePath }}'
                      new_content: '{{ newContent }}'
                      validation_rules:
                        - name: isTestCountMatchesValidator
                          rule_type: optional
                          fixers:
                            - name: numOfTestsFixer
                    returns: validatedContent

                  - name: write_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                      content: '{{ validatedContent }}'

  - tools:
      - name: for_each
        items: '{{ files }}'
        each_item:
          item_name: filePath
          tools:
            - name: get_content_from_file
              arguments:
                path_to_file: '{{ filePath }}'
              returns: fileContent

            - name: edit_file
              arguments:
                path_to_file: '{{ filePath }}'
                edit_prompt: |
                  Replace import { render } from '@testing-library/react' with import { render } from '{{ customRender }}'
              returns: newContent

            - name: write_file
              arguments:
                path_to_file: '{{ filePath }}'
                content: '{{ newContent }}'

  - tools:
      - name: get_content_from_file
        arguments:
          path_to_file: '{{ projectRepoPath }}/package.json'
        returns: packageJson

      - name: edit_json
        arguments:
          path_to_file: '{{ projectRepoPath }}/package.json'
          json_path: 'devDependencies'
          action: update
          values:
            - key: '@testing-library/react'
              value: 'latest'
        returns: updatedPackageJson

      - name: write_file
        arguments:
          path_to_file: '{{ projectRepoPath }}/package.json'
          content: '{{ updatedPackageJson }}'

  - tools:
      - name: for_each
        items: '{{ files }}'
        each_item:
          item_name: filePath
          tools:
            - name: run_test
              arguments:
                path_to_file: '{{ filePath }}'
                test_command: 'jest {{ filePath }}'
              returns: testResult

            - name: if_else
              condition: '{{ testResult.numFailedTests != 0 or testResult.numRuntimeErrorTestSuites != 0 }}'
              if:
                tools:
                  - name: get_content_from_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                    returns: htmlStr

                  - name: get_content_from_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                    returns: imports

                  - name: edit_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                      edit_prompt: |
                        Update the Jest test as per the provided snapshot and HTML content, ensuring that the number and descriptions of tests remain unchanged.
                        Jest snapshot: {{ testResult.testResults[0].message }}.
                        HTML snapshot: {{ htmlStr }}.
                        Component source: {{ imports }}.
                    returns: newContent

                  - name: validate
                    arguments:
                      path_to_file: '{{ filePath }}'
                      new_content: '{{ newContent }}'
                      validation_rules:
                        - name: isTestCountMatchesValidator
                          rule_type: optional
                          fixers:
                            - name: numOfTestsFixer
                    returns: validatedContent

                  - name: write_file
                    arguments:
                      path_to_file: '{{ filePath }}'
                      content: '{{ validatedContent }}'

Last updated