Medium - React "sub-components" - Article test file

Article.spec.js

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

// First we declare some mocks
const Content = () => <div>[Mock] Content</div>;
const Subtitle = () => <div>[Mock] Subtitle</div>;
const Comments = () => <div>[Mock] Comments</div>;
const Metadata = () => <div>[Mock] Metadata</div>;
const Title = () => <div>[Mock] Title</div>;
const Subtitles = () => <div>[Mock] Subtitles</div>;

it('Renders with all the sub-components', () => {
  // Then we try to render the Article component with the desired sub-components
  const component = mount(
    <Article>
      <Article.Title>
        <Title />
      </Article.Title>
      <Article.Subtitle>
        <Subtitle />
      </Article.Subtitle>
      <Article.Metadata>
        <Metadata />
      </Article.Metadata>
      <Article.Content>
        <Content />
      </Article.Content>
      <Article.Comments>
        <Comments />
      </Article.Comments>
    </Article>
  );
  // Finally we check it matches its snapshot stored in the project
  expect(component).toMatchSnapshot();
});

it('Renders with only the Content and Comments', () => {
  // We can iterate the same process again with a different combination of sub-components
  const component = mount(
    <Article>
      <Article.Content>
        <Content />
      </Article.Content>
      <Article.Comments>
        <Comments />
      </Article.Comments>
    </Article>
  );
  expect(component).toMatchSnapshot();
});

it('Renders with a Title and without a subtitle', () => {
  const component = mount(
    <Article>
      <Article.Title>
        <Title />
      </Article.Title>
      <Article.Metadata>
        <Metadata />
      </Article.Metadata>
      <Article.Content>
        <Content />
      </Article.Content>
      <Article.Comments>
        <Comments />
      </Article.Comments>
    </Article>
  );
  expect(component).toMatchSnapshot();
});