screen.debug() not displaying the value that userEvent.type() typed into a textbox #1098
Description
@testing-library/reactversion: 12.1.2- Testing Framework and version: Jest ^28.1.3
- DOM Environment: jsdom 28.1.2
Relevant code or config:
test('LoginPage should handle events properly', async () => {
render(<LoginPage />)
screen.debug()
const privateKeyInput = screen.getByPlaceholderText(/enter your private key here/i)
await userEvent.type(privateKeyInput, 'asdf4saf45saf45sdaf542545')
expect(privateKeyInput).toHaveValue('asdf4saf45saf45sdaf542545')
screen.debug(privateKeyInput)
})What you did:
Wrote a test to see if the value of the textbox was updated with the value that userEvent.type() would write in. I asserted that the value of the textbox was updated using the .toHaveValue() method and used screen.debug() before and after the typing assertion to see that the value field would show after the typing assertion was made.
What happened:
The assertion that uses the .toHaveValue() method passed! The strange part was that the value= field was not populated when I used screen.debug() the second time.
No error message, but here are the screen.debug() outputs before and after the typing assertion to demonstrate that the value is not populated after the .type() assertion:
<body>
<div>
<div
class="login-page"
>
<div
class="left-column"
>
<img
src="test-file-stub"
/>
</div>
<div
class="right-column"
>
<div
class="close"
>
<img
id="unirep-icon"
src="test-file-stub"
/>
<img
id="close-icon"
src="test-file-stub"
/>
</div>
<div
class="info"
>
<div
class="title"
>
Welcome back
</div>
<p>
To enter the app, please use the private key you got when you signed up.
</p>
<textarea
placeholder="enter your private key here."
/>
<div />
<div
class="sign-in-btn"
>
<div
class="loading-btn"
>
Sign in
</div>
</div>
<div
class="notification"
>
Lost your private key? Hummm... we can't help you to recover it, that's a lesson learned for you. Want to restart to earn rep points?
<a
href="https://about.unirep.social/alpha-invitation"
target="_blank"
>
Request an invitation code here.
</a>
</div>
<div
class="go-to-signup"
>
Got an invitation code?
<a
href="/signup"
>
Join here
</a>
</div>
</div>
</div>
<div />
</div>
</div>
</body>Debug statement after typing assertion was made.. this is where I assumed the value field would populate.
<textarea
placeholder="enter your private key here."
/>Reproduction:
Problem description:
screen.debug() not showing the value field populated with the correct value.
Suggested solution:
Really not sure about a solution to this and just wondering if this is a bug. I'd like to be sure that the value is actually populated so I can have confidence in this test.