Jest Unit Test - Издевательский компонент с подпорками - PullRequest
Новая
       19

Jest Unit Test - Издевательский компонент с подпорками

0 голосов
/ 19 марта 2020

Я пытаюсь создать Jest Mock для NextSeo, где я могу запускать утверждения для реквизитов, переданных в Meta.

У меня есть базовый c рабочий пример ниже, но я не уверен, как включить реквизиты в моем макете для запуска утверждений на.

мета-компонент 

const Meta = (props: Props) => {
  return (
    <NextSeo
      title={props.title == 'Homepage' ? appMeta.title : props.title}
      description={
        props.title == 'Homepage' ? appMeta.description : props.description
      }
    />
  );
};

export default Meta;

мета-модульный тест 

jest.mock('next-seo', () => ({
  NextSeo: '<div></div>', // I am trying to add props here
}));

describe('<ContactUs/>', () => {
  it('can render with default props', () => {
    const ContactUsWrapper = shallow(
      <Meta title="title" description="description" />
    );

    expect(NextSeo).toEqual('<div></div>');
  });
});

Чего я пытаюсь достичь:

Макет: 

jest.mock('next-seo', () => ({
   NextSeo: '<div>{props.title} {props.desctription}</div>',
}));

Spe c: 

expect(NextSeo).toEqual('<div>title description</div>');

1 Ответ

0 голосов
/ 20 марта 2020

Вы можете смоделировать NextSeo компонент функциональным компонентом. Например,

index.tsx: 

import React from 'react';
import { NextSeo } from './next-seo';

type Props = any;
const Meta = (props: Props) => {
  const appMeta = { title: '', description: '' };
  return (
    <NextSeo
      title={props.title === 'Homepage' ? appMeta.title : props.title}
      description={props.title === 'Homepage' ? appMeta.description : props.description}
    />
  );
};

export default Meta;

next-seo.tsx: 

import React from 'react';
export const NextSeo = ({ title, description }) => <span></span>;

index.test.tsx: 

import Meta from './';
import React from 'react';
import { mount } from 'enzyme';

jest.mock('./next-seo', () => ({
  NextSeo: (props) => (
    <div>
      {props.title} {props.description}
    </div>
  ),
}));

describe('<ContactUs/>', () => {
  it('can render with default props', () => {
    const ContactUsWrapper = mount(<Meta title="title" description="description" />);
    expect(ContactUsWrapper).toMatchSnapshot();
  });
});

Результаты испытаний: 

 PASS  stackoverflow/60759940/index.test.tsx (7.958s)
  <ContactUs/>
    ✓ can render with default props (37ms)

 › 1 snapshot updated.
Snapshot Summary
 › 1 snapshot updated from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 updated, 1 total
Time:        9.08s

index.test.tsx.snap: 

// Jest Snapshot v1

exports[`<ContactUs/> can render with default props 1`] = `
<Meta
  description="description"
  title="title"
>
  <NextSeo
    description="description"
    title="title"
  >
    <div>
      title

      description
    </div>
  </NextSeo>
</Meta>
`;
...