TypeError: dompurify_1.default.sanitize is not a function

[marcelo-umg]

I am trying to run my tests and I am getting an error

 FAIL  src/components/articles/ArticleTeaser.test.tsx (5.781s)
  ArticleTeaser
    ✓ renders null without article (6ms)
    ✕ renders correctly with article (10ms)
    ✎ 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={{ __html: createDOMPurify.sanitize(article.body) }} />
         |                                                                    ^
      24 |         </p>
      25 |       </Link>
      26 |     </div>

This is the test:

import React from 'react';
import ArticleTeaser from './ArticleTeaser';
import { dummyArticle } from '../../shared/models/Article.model';
import { shallowRender } from '../../shared/services/testHelper';

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();
  });

  it.todo('is clickable');
});

And the component:

import React, { FC } from 'react';
import createDOMPurify from 'dompurify';
import { Link } from 'react-router-dom';
import Article from '../../shared/models/Article.model';
import { formatDate } from '../../shared/services/date';

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={{ __html: createDOMPurify.sanitize(article.body) }} />
        </p>
      </Link>
    </div>
  );
};

export default ArticleTeaser;

The import import createDOMPurify from 'dompurify'; I already tried with

import DOMPurify from 'dompurify'; or import { sanitize } from 'dompurify'; and I am still getting the same error.

Versions:

"@types/dompurify": "0.0.33",
"dompurify": "^1.0.11",
"react": "^16.8.6",

So what could I be missing?

[cure53]

I have no idea :D @tdeekens any clue?

[tdeekens]

Isn‘t this invocation wrong? createDOMPurify.sanitize(article.body)? You need to invoke the factory?

[ChristopherGillis]

@tdeekens Can you give an example? Dompurify works in the browser, but fails in jest.

[tdeekens]

Yes cause I think in your test you are not invoking the createDOMPurify function.

You need to

const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

[ChristopherGillis]

As far as I'm aware, Jest doesn't have access to "window", so this would still fail?

[ChristopherGillis]

Ahh, found the solution here: #29 (comment)

I would suggest that this ^ should probably be in the official docs/examples.

Thanks @tdeekens!

[cure53]

@ChristopherGillis PRs are welcome :)