-
Notifications
You must be signed in to change notification settings - Fork 466
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Make screen compatible with document.body.replaceWith() #1311
Draft
jdufresne
wants to merge
1
commit into
testing-library:main
Choose a base branch
from
jdufresne:replacewith
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
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
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 430e952:
|
Right now this fails type checks with the errors:
I'm uncertain how to best resolve this. |
What: The screen utility no longer caches the body element at import time. When the body or entire HTML document changes with replaceWith(), the screen utility continues to operate on the global value. Why: My integration testing environment strives to creates testing scenarios that are as realistic to production as possible. This aligns with the library's guiding principles: > We try to only expose methods and utilities that encourage you to > write tests that closely resemble how your web pages are used. To assist with this, parts of my integration testing environment involve a 2-step process: 1. Run a command to dump the HTML documents rendered by the backend. 2. Load those dumps into a Jest test environment to assert JavaScript behavior. Loading the HTML document in Jest is a challenge as the global HTML document is setup by jest-environment-jsdom ahead of the test running. To make this work well, the environment "replaces" the jsdom HTML document like: ``` const content = loadHTML(...); const tmpDom = new jsdom.JSDOM(content); const tmpDocument = tmpDom.window.document; // Replace the global document with the one from the backend. document.documentElement.replaceWith(document.adoptNode(tmpDocument.documentElement)); ``` This works out great in practice for me. The JavaScript is tested against real HTML documents rather than fabricated ones for the test. In the event that the backend changes how elements are rendered that, the integration tests will expose this and force a fix to make the two compatible. With this change, the screen utility is now usable as a convenience. How: Rather than caching the document.body at import time, screen now dynamically uses the most up date value on the global document.
jdufresne
changed the title
Make screen compatible with document.body.replaceWith()
feat: Make screen compatible with document.body.replaceWith()
Apr 28, 2024
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.
What:
The screen utility no longer caches the body element at import time. When the body or entire HTML document changes with replaceWith(), the screen utility continues to operate on the global value.
Why:
Closes #1310
My integration testing environment strives to creates testing scenarios that are as realistic to production as possible. This aligns with the library's guiding principles:
To assist with this, parts of my integration testing environment involve a 2-step process:
Loading the HTML document in Jest is a challenge as the global HTML document is setup by jest-environment-jsdom ahead of the test running. To make this work well, the environment "replaces" the jsdom HTML document like:
This works out great in practice for me. The JavaScript is tested against real HTML documents rather than fabricated ones for the test. In the event that the backend changes how elements are rendered that, the integration tests will expose this and force a fix to make the two compatible.
With this change, the screen utility is now usable as a convenience.
How:
Rather than caching the document.body at import time, screen now dynamically uses the most up date value on the global document.
Checklist:
docs site N/A