content: import React from 'react';
  import renderer from 'react-test-renderer';
  import 'jest-styled-components';
  import remcalc from 'remcalc';
  
  import SectionList, { Item, Anchor } from '../';
  import { Theme } from '../../mocks';
  import theme from '../../theme';
  
  describe('SectionList', () => {
    test('SectionList', () => {
      const tree = renderer
        .create(
          <Theme>
            <SectionList>
              <Item>
                <Anchor active>Overview</Anchor>
              </Item>
              <Item>
                <Anchor>Services</Anchor>
              </Item>
              <Item>
                <Anchor>Instances</Anchor>
              </Item>
            </SectionList>
          </Theme>
        )
        .toJSON();
  
      expect(tree).toMatchSnapshot();
    });
  
    test('Item', () => {
      const tree = renderer
        .create(
          <Theme>
            <Item>
              <Anchor>Instances</Anchor>
            </Item>
          </Theme>
        )
        .toJSON();
  
      expect(tree).toMatchSnapshot();
      expect(tree).toHaveStyleRule('font-size', remcalc(15));
    });
  
    test('Anchor', () => {
      const tree = renderer
        .create(
          <Theme>
            <Anchor>Instances</Anchor>
          </Theme>
        )
        .toJSON();
  
      expect(tree).toMatchSnapshot();
      expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
    });
  
    test('Anchor', () => {
      const tree = renderer
        .create(
          <Theme>
            <Anchor active>Instances</Anchor>
          </Theme>
        )
        .toJSON();
  
      expect(tree).toMatchSnapshot();
      expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
    });
  });
  