测试组件：如何使用 getByTestId 访问标签的属性

Question

我正在 react 中进行组件测试（我的第一个），我想验证一个数字，当我将值传递给它时，它返回 undefined 并且我删除了该值以查看它返回的内容，它很好，找到元素

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

当我访问标签时，我需要它，当它找到它时，获取值......

Answer 1

您已经使用了@testing-library，所以我建议更进一步，将https://www.npmjs.com/package/@testing-library/jest-dom 添加为devDependency。如果使用基于 Create React App 的应用程序，您可以向 setupTests.js 文件添加类似导入，例如

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

然后您可以编写测试来检查字段的值，使用如下：

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

使用jest-dom 可以让您编写读起来更好的测试，但这只是我的看法。