Как я могу проверить метод, который должен быть загружен при монтировании компонента в функциональном компоненте? - PullRequest
Новая
       5

Как я могу проверить метод, который должен быть загружен при монтировании компонента в функциональном компоненте?

0 голосов
/ 23 апреля 2020

Итак, я создал метод для добавления атрибута target к каждому якору в некоторых c случаях. 

/**
 * This method adds the attr target _blank to the anchors missing it.
 */

export const handleAnchors = (): void => {
  const getBody: HTMLCollectionOf<Element> = document.getElementsByClassName('rendered-markup');

  if (getBody) {
    for (let i = 0; i < getBody.length; i++) {
      const anchors = getBody[i].getElementsByTagName('a');
      if (anchors && anchors.length) {
        for (let j = 0; j < anchors.length; j++) {
          anchors[j].setAttribute('target', '_blank');
        }
      }
    }
  }
};

Он отлично работает, например, для этого компонента: 

import { handleAnchors } from '../utils/customHooks';

export const RenderedMarkup: FC<RenderedMarkupProps> = (props) => {
  useEffect(() => {
    handleAnchors();
  }, [props.markup]);

  return (
    <div
      className={`rendered-markup ${props.className}`}
      dangerouslySetInnerHTML={{ __html: createDOMPurify.sanitize(props.markup) }}
    />
  );
};

Но когда я пытаюсь проверить это: 

import React, { useEffect } from 'react';
import * as customHooks from './customHooks';
import { shallow } from 'enzyme';

jest.mock('./customHooks.ts');

export type Props = {
  markup: string;
};

const TestComp: React.FC<Props> = (props): JSX.Element => {
  useEffect(() => {
    customHooks.handleAnchors();
  }, [props.markup]);

  return (
    <div className="rendered-markup undefined"><a href={props.markup}>GOOGLE</a></div>
  );
};

describe('handleAnchors', () => {
  it('adds attribite target to anchor', () => {
    const wrapper = shallow(<TestComp markup="the/url/com" />);
    expect(wrapper).toMatchSnapshot();
  });
});

Это снимок: 

// Jest Snapshot v1

exports[`handleAnchors adds attribite target to anchor 1`] = `
<div
  className="rendered-markup undefined"
>
  <a
    href="the/url/com"
  >
    GOOGLE
  </a>
</div>
`;

Это означает, что тест не работает должным образом.

Любой идеи?

...