Блог

Я провожу тест компонента в react (мой первый) и хочу проверить число, когда я передаю ему значение, оно возвращается неопределенным, и я удаляю значение, чтобы посмотреть, что оно вернуло, и все было в порядке, найдите элемент

 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
 

Мне нужно, чтобы при доступе к тегу, когда он его найдет, получить значение…

Вы уже используете @testing-библиотеку, поэтому я предлагаю сделать еще один шаг вперед и добавить https://www.npmjs.com/package/@testing-library/jest-dom как зависимость от девайса. Если вы используете приложение на основе приложения Create React, вы можете добавить в свой setupTests.js файл импорт, например

 import '@testing-library/jest-dom/extend-expect';
 

Затем вы можете написать тесты для проверки значения поля, используя что-то вроде:

 expect(getByRole('textbox', { name: /email/i })).toHaveValue('test@email.com);
 

Использование jest-dom позволяет вам писать тесты, которые читаются намного лучше, но это только мое мнение.