lundi 5 août 2019

How to test 3rd party libraries on react test library + jest?

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