reactjs - 对于非布尔属性测试 React Test Jest 与 data-testid 收到 true

Question

试图做一个测试。我想检查“禁用”为真时是否存在图标

DeviceNote.js

import React from 'react';
import PropTypes from 'prop-types';
import { BrightnessAltHighFill, BrightnessAltLow } from 'react-bootstrap-icons';

const DeviceNote = ({ name, description, disabled }) => {
  return (
        <p>{name}</p>
        <p>{description}</p>
        {disabled ? (
          <BrightnessAltHighFill data-testid="iconTrue" test size={48} />
        ) : (
          <BrightnessAltLow data-testid="iconFalse" size={48} />
        )}
  );
};

export default DeviceNote;

DeviceNote.test.js

import React from 'react';
import { render } from '@testing-library/react';
import DeviceNote from './DeviceNote';

describe(' Tests for Device Note', () => {
  it('Test check Descriptions for Device', () => {
    const name = 'defaultValueTitle';
    const description = 'defaultValueMail';
    const disabled = true;

    const { getByTestId, getByText } = render(
      <DeviceNote name={name} description={description} disabled={disabled} />,
    );

    if (disabled) expect(getByTestId('iconTrue')).toBeInTheDocument();
    else expect(getByTestId('iconFalse')).toBeInTheDocument();

    expect(getByText(name)).toBeInTheDocument();
    expect(getByText(description)).toBeInTheDocument();
  });
});

当插入引导图标道具“data-testid”进行测试时，我有一个错误

  console.error
    Warning: Received `true` for a non-boolean attribute `test`.
    
    If you want to write it to the DOM, pass a string instead: test="true" or test={value.toString()}.
        at svg
        at E:\Front-React-Driver\react-driver\node_modules\react-bootstrap-icons\build\index.js:5427:20

我不知道是什么原因

标签： reactjsjestjsreact-testing-library

Answer 1

您的 DeviceNote 组件具有以下逻辑：

{disabled ? (
    <BrightnessAltHighFill data-testid="iconTrue" test size={48} />
    ) : (
    <BrightnessAltLow data-testid="iconFalse" size={48} />
)}

看起来您打算输入disabled而不是test在那里。由于您没有为 设置值test，因此将其解释为真值，因为未指定值的 html 属性是布尔值，但test不是可识别的 html 属性，因此它假定它是非布尔值.