effective-testing-for-styled-components-button-test-with-theme

effective-testing-for-styled-components-button-test-with-theme.js

// lib/blocks/Button/__tests__/index.js

import React from 'react';
import Button from '../index';
import 'jest-styled-components';

import { renderWithTheme } from '__tests__/helpers';

describe('Button Block', () => {
  it('renders correctly', () => {
    const tree = renderWithTheme(
      <Button>
        <Button.Text>Login</Button.Text>
        <Button.Icon name="home" />
      </Button>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
  
  it('adds the primary modifier', () => {
    const tree = renderWithTheme(
      <Button modifiers={['primary']}>
        <Button.Text>Login</Button.Text>
        <Button.Icon name="home" />
      </Button>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
  
  it('adds the secondary modifier', () => {
    const tree = renderWithTheme(
      <Button modifiers={['secondary']}>
        <Button.Text>Login</Button.Text>
        <Button.Icon name="home" />
      </Button>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
  
  it('adds the disabled modifier', () => {
    const tree = renderWithTheme(
      <Button modifiers={['disabled']}>
        <Button.Text>Login</Button.Text>
        <Button.Icon name="home" />
      </Button>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});