I have a component that gets accepts a prop, called license. I am trying to test a couple of things but I am failing.
Basically, I want to check that if my property is present, then show a specific element with class or another component. I have a few.
Here is my test, in which I try to check that if I have the prop.license.expiredAt, is true, then the Icon component should be present:
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);
});
});
But I get an error:
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)
And here is my component:
/* 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;
I am really new to testing so, if I have forgotten something please ask and I will provide. I am struggling quite a bit and would like some help. An explanation of
Aucun commentaire:
Enregistrer un commentaire