Test for a component: How to access to a property of a tag with getByTestId - reactjs

Question

I'm doing a component test in react (My first) and I want to verify a number, when I pass it the value, it returns undefined and I remove the value to see what it returned and it was fine, find the element
import React, { useState } from 'react';
import { render, cleanup, screen } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
import { NumberUpDown } from '../../components/number-
updown/NumberUpDown';
import '#testing-library/jest-dom/extend-expect'
const UpDownNumber = () => {
const [quantity, setQuantity] = useState<number>(1);
const packageType = 'box'
return (
<NumberUpDown
value={quantity}
valueToShow={
packageType === 'box' || 'pack' || 'piece' || 'bag' || 'sbox'
? quantity : quantity * 12
}
min={1}
max={5000}
step={1}
onChange={value => setQuantity(value)}
/>
);
};
describe('Plus or minus in the product modal', () => {
afterEach(cleanup);
beforeEach(() => render(<UpDownNumber />));
it('Validate is if exists', () => {
expect(screen.getByTestId('product-minus')).toBeInTheDocument();
expect(screen.getByTestId('product-input')).toBeInTheDocument();
expect(screen.getByTestId('product-plus')).toBeInTheDocument();
});
it('Validate function onclick', () => {
const minusButton = screen.getByTestId('product-minus');
const plusButton = screen.getByTestId('product-plus');
const input = screen.getByTestId('product-input');
userEvent.click(plusButton);
userEvent.click(plusButton);
expect(getByRole('textbox', { name: /email/i })).toHaveValue('test#email.com);
expect((input as HTMLInputElement).value).toBe(3);
userEvent.click(minusButton);
expect((input as HTMLInputElement)).toBe(2);
});
});
Expected: 3
Received: <ion-input class="value-cell" data-testid="product-input" type="number"
value="3" />
expect((input as HTMLInputElement).value).toBe(3);
Expected: 3
Received: undefined
I need that when I access the tag, when it finds it, get the value...

Answer 1

You already use #testing-library, so I suggest taking it one step further and add https://www.npmjs.com/package/#testing-library/jest-dom as a devDependency. If using a Create React App based app, you can add an import like to your setupTests.js file e.g.
import '#testing-library/jest-dom/extend-expect';
You can then write tests to check the value of a field using something like:
expect(getByRole('textbox', { name: /email/i })).toHaveValue('test#email.com);
Using the jest-dom lets you write tests that read far nicer, but that is just my opinion.