对于一个非布尔属性测试React test Jest with data- tested接收为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- testd& quot;对于测试我有一个错误

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-Driverreact-drivernode_modulesreact-bootstrap-iconsbuildindex.js:5427:20

我不知道原因是什么

Answer 1

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

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

看起来你想在这里输入disabled而不是test。因为你没有为test设置一个值，它解释为一个真值，因为没有指定值的html属性是布尔值，但test不是一个公认的html属性，所以它假设它是一个非布尔值。