I am using react test library -> https://reactjs.org/docs/test-renderer.html
And the 3rd party library I am attempting to test is -> https://www.npmjs.com/package/dompurify
I am trying to test a functionality which includes dangerouslySetInnerHTML
and dompurify
but I am not having success.
This is how the component looks
import React, { FC } from 'react';
import createDOMPurify from 'dompurify';
import { Link } from 'react-router-dom';
import Article from '../../shared/models/Article.model';
interface Props {
article?: Article;
}
const ArticleTeaser: FC<Props> = props => {
const { article } = props;
if (!article) return null;
return (
<div className='content-teaser content-teaser--article'>
<Link to={`/article/${article.id}`}>
<p className='content-teaser__summary--article'>
<span dangerouslySetInnerHTML= />
</p>
</Link>
</div>
);
};
And this is my test so far:
import React from 'react';
import ArticleTeaser from './ArticleTeaser';
import { dummyArticle } from '../../shared/models/Article.model';
import { shallowRender } from '../../shared/services/testHelper';
import TestRenderer from 'react-test-renderer';
const mockSanitizer: any = { sanitize: (a: any) => a };
describe('ArticleTeaser', () => {
it('renders null without article', () => {
const tree = shallowRender(<ArticleTeaser />);
expect(tree).toBe(null);
});
it('renders correctly with article', () => {
const tree = shallowRender(<ArticleTeaser article={dummyArticle} />);
expect(tree).toMatchSnapshot();
});
});
This is my test method:
import ShallowRenderer from 'react-test-renderer/shallow';
import getStore from './globalBasicStore';
export const shallowRender = (toRender: any) => {
const renderer = ShallowRenderer.createRenderer();
renderer.render(toRender);
return renderer.getRenderOutput();
};
export const getMockStore = getStore;
And I am getting the following error with that test above:
FAIL src/components/articles/ArticleTeaser.test.tsx
ArticleTeaser
✓ renders null without article (5ms)
✕ renders correctly with article (6ms)
✎ todo is clickable
● ArticleTeaser › renders correctly with article
TypeError: dompurify_1.default.sanitize is not a function
21 | <div className='content-teaser__date content-teaser__date--article'>{formatDate(article.created)}</div>
22 | <p className='content-teaser__summary--article'>
> 23 | <span dangerouslySetInnerHTML= />
| ^
24 | </p>
25 | </Link>
26 | </div>
at ArticleTeaser (src/components/articles/ArticleTeaser.tsx:23:68)
at ReactShallowRenderer.render (../mobile/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:758:32)
at Object.<anonymous>.exports.shallowRender (../mobile/src/shared/services/testHelper.ts:7:12)
at Object.it (src/components/articles/ArticleTeaser.test.tsx:18:18)
What am I missing?
Aucun commentaire:
Enregistrer un commentaire