Тест с компонентом выполнен - PullRequest
Новая
       11

Тест с компонентом выполнен

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

Я использую Jest с энзимом для модульного тестирования. У меня есть компонент, который отображает компоненты на основе типа носителя. В рамках модульного тестирования я проверяю, был ли показан соответствующий компонент.

Мой компонент 

const getComponent = {
 'image': ImageComp,
 'video': VideoComp,
 'other': DocumentComp
}

const MediaDisplay =  (props) =>  {
    let { assetInfo } = props;
    let source = assetInfo.assetUrl;
    const PreviewComponent = getComponent[assetInfo.type];
    return ( <div>
        {source && <PreviewComponent assetInfo={assetInfo} />}
        </div>
    );
}

В модульном тестировании 

import React from 'react';
import MediaDisplay from './../MediaDisplay';
import Enzyme, { mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

describe('<MediaDisplay/>', () => {
  it('should render Image component when asset type is image', () => {
    const mockAssetInfo = {
        assetUrl:'https://example.com/image001.jpg',
        type:'image'

    };
    const component = mount(<MediaDisplay assetInfo={mockAssetInfo} />);
    expect(component).toMatchSnapshot();
  });
});

Я не думаю, что пишу тестовый пример правильно. Может кто-нибудь помочь мне написать этот тест?

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

Заранее большое спасибо.

1 Ответ

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

Я думаю, что ваш тест не выполняет то, что предполагается тестировать, потому что ваш случай говорит о том, что он должен визуализировать компонент Image, когда тип актива - изображение, но вы просто проверяете, что компонент соответствует моментальному снимку, если вы используя mount, вы должны иметь возможность видеть содержимое дочерних компонентов, поэтому, например, если ваш PreviewComponent отображает разные вещи, в зависимости от пройденных реквизитов, вы можете протестировать эти поведения. Или, если вы хотите просто проверить, что assetInfo.type - это «изображение», вы всегда можете сделать: смонтировать и сделать это: 

import PreviewComponent from "your-component-route"

describe("renders a PreviewComponent", () => {
 beforeAll(() => {
  const mockAssetInfo = {
    assetUrl:'https://example.com/image001.jpg',
    type:'image'

  };
  const component = shallow(<MediaDisplay assetInfo={mockAssetInfo} />);
 });

 it("wraps a PreviewComponent component", () => {
  expect(component.find(PreviewComponent).length).toBe(1);
 });
});
...