reactjs - Jest 单元测试 - 使用 props 模拟组件

Question

我正在尝试为 NextSeo 制作一个 Jest Mock，我可以在传递给 Meta 的 props 上运行断言。

我下面有一个基本的工作示例，但我不确定如何在我的模拟中包含 Prop 来运行断言。

元组件

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>',
}));

规范:

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

Answer 1

您可以将 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>
`;