reactjs - Received true for a non-boolean attribute test React Test Jest with data-testid

Question

trying to do a test. I want to check if an icon exists when "disabled" is true

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();
  });
});

When inserted into the bootstrap icon props "data-testid" for test I have a error

  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
eact-driver
ode_modules
eact-bootstrap-iconsuildindex.js:5427:20

I don't know what the reason is for

question from:https://stackoverflow.com/questions/65893898/received-true-for-a-non-boolean-attribute-test-react-test-jest-with-data-testid

Answer 1

Your DeviceNote component has the logic:

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

It looks like you meant to type disabled rather than test there. Since you didn't set a value for test, it's interpreting that as a true value since html attributes that don't have a value specified are boolean, but test isn't a recognized html attribute so it assumes it's meant to be a non-boolean.