-1

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...

Emocrat3
  • 65
  • 2
  • 9

1 Answers1

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.

Mark Small
  • 394
  • 1
  • 5
  • I just made an update, with all the code of the test component – Emocrat3 Jul 14 '21 at 22:05
  • Sorry I think I've not explained myself very well. Looks like you just copy/pasted my test line, but you would need to amend it for your purpose, so maybe something like `expect(screen.getByTestId('product-input')).toHaveValue(3);`. I am assuming that clicking the plus button, increments the value of the input element. If possible though, best to use `getByRole` over `getByTestId`. `@testing-library` does a really good job of displaying roles found, if it can find the one specified. – Mark Small Jul 14 '21 at 22:12
  • expect(element).toHaveValue(3) Expected the element to have value: 3 Received: undefined – Emocrat3 Jul 14 '21 at 22:16
  • Same problem :/ :( – Emocrat3 Jul 14 '21 at 22:17
  • There is code you have I don't have access to, if possible, you could create a [sandbox](https://codesandbox.io/) with all your code, so it can be run and post back the URL here. Might help figure out your problem easier. – Mark Small Jul 14 '21 at 22:30
  • As an aside, you no longer need to call the `cleanup` function, this is handled automatically. See [common testing-library mistakes](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library) – Mark Small Jul 14 '21 at 22:33