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: async_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: async_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: async_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