get input value (react-testing library)

Question

Can't seem to get the value of an input using react-testing library, but for some reason one can set a value via fireEvent. nameInput is an actual input element

test('verify name validation works', () => {
    const { getByPlaceholderText, getByTestId, debug } = render(<Home/>)

    const passForm = getByTestId('form')
    const nameInput = getByPlaceholderText('Name');

    fireEvent.change(nameInput, { target: { value: 'TestName' }});
    debug(nameInput.value) // error
})

Update

I have to assert as HTMLInputElement to work as ts inferring it as a generic HTMLElement

expect((nameInput as HTMLInputElement).value)

Is it a controlled input ? otherwise the change will not really update the input value. — Gabriele Petrioli
– Gabriele Petrioli, Commented Mar 14, 2021 at 9:46
@GabrielePetrioli it does update the input value, my problem is - I'm not able to get the value from the input — swoopy
– swoopy, Commented Mar 14, 2021 at 9:47
@swoopy To clarify, is your update the solution to your problem? Or are you still having an issue? — juliomalves
– juliomalves, Commented Mar 14, 2021 at 10:56
I'd suggest you add the update as an answer to this question then. Makes it clear for people landing here that the issue already has a solution. — juliomalves
– juliomalves, Commented Mar 14, 2021 at 11:09

anolan23 · Accepted Answer · 2022-08-21 00:37:47Z

4

Instead of using type assertion, you can use generic:

const nameInput = getByPlaceholderText<HTMLInputElement>('Name');
expect(nameInput.value).toBe('Nice!')

answered Aug 21, 2022 at 0:37

anolan23

5224 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swoopy · Accepted Answer · 2021-03-14 11:13:19Z

3

I have to assert nameInput as HTMLInputElement to work as ts is inferring it as a generic HTMLElement

expect((nameInput as HTMLInputElement).value)

answered Mar 14, 2021 at 11:13

swoopy

3761 gold badge4 silver badges21 bronze badges

1 Comment

Hayden Linder Over a year ago

A solution without a type assertion would be nice. Type assertions can be dangerous.

Collectives™ on Stack Overflow

get input value (react-testing library)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related