У меня есть компонент, который получает опору, которая называется license.Я пытаюсь протестировать несколько вещей, но у меня ничего не получается.
По сути, я хочу проверить, что если мое свойство присутствует, то показать определенный элемент с class или другой компонент.У меня есть несколько.
Вот мой тест, в котором я пытаюсь проверить, что если у меня есть prop.license.expiredAt, верно, то компонент Icon должен присутствовать:
it('expects to show LicenseInfo if license prop is true', () => {
const props = {
license: {
clientId: '01',
expiredAt: 1551391198000,
isValid: true, }
};
const wrapper = shallow(
<LicenseInfo license={props.license}>
<div>test</div>
</LicenseInfo>
);
const html = wrapper.find(<Icon icon="test" />).html();
expect(html).toContain(props.license.expiry);
});
});
Но я получаю ошибку:
FAIL src/LicenseInfo/__tests__/index.test.tsx (8.156s)
● LicenseInfo Component › expects to show LicenseInfo if license prop is true
Method “html” is meant to be run on 1 node. 0 found instead.
30 | </LicenseInfo>
31 | );
> 32 | const html = wrapper.find(<Icon icon="test" />).html();
| ^
33 | expect(html).toContain(props.license);
34 | });
35 | });
at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1875:17)
at ShallowWrapper.html (node_modules/enzyme/build/ShallowWrapper.js:1032:21)
at Object.it (src/shared/common/components/panel/LicenseInfo/__tests__/index.test.tsx:32:53)
И вот мой компонент:
/* eslint-disable react/default-props-match-prop-types */
import React, { Fragment } from 'react';
import moment from 'moment';
import ILicense from 'dto/ILicense';
import PageHeader from 'components/PageHeader';
import Icon from 'components/Icon';
export interface Props {
license: ILicense;
}
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const LicenseInfo = <T extends object>({ license }: Props & T) =>(
<Fragment>
{license ? (
<Fragment>
<div className="container mt-5">
<PageHeader className="font-weight-bold">License Information</PageHeader>
<div className="container bg-white">
<div className="py-5 ml-3">
{license.expiredAt ? (
<div className="mb-5">
<Icon icon="check" className="fa-lg text-success" />
Your License is Valid
</div>
) : (
<div className="mb-5">
<Icon icon="exclamation-circle" className="fa-lg text-danger" />
YourLicense has expired
</div>
)}
<table className="table col-6">
<tbody>
<tr>
<td>Valid Until:</td>
<td className="font-weight-bold">
{moment(license.expiredAt).format('YYYY-MM-DD HH:mm:ss')}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Fragment>
) : null}
</Fragment>
);
LicenseInfo.defaultProps = {
clientId: '',
expiredAt: null,
isValid: false,
};
export default LicenseInfo;
Я действительно новичок в тестировании, поэтому, если я что-то забыл, пожалуйста, спросите, и я предоставлю,Я немного борюсь и хотел бы помочь.Объяснение