Skip to content

Instantly share code, notes, and snippets.

View alanbsmith's full-sized avatar
👋

Alan B Smith alanbsmith

👋
188 followers · 40 following
View GitHub Profile
@alanbsmith
alanbsmith / effective-testing-for-styled-components-test-output-2.sh
Created December 8, 2017 21:39
effective-testing-for-styled-components-test-output-2
$ yarn test
FAIL lib/blocks/Button/__tests__/index.js
Button Block
✕ renders correctly (18ms)
● Button Block › renders correctly
expect(value).toMatchSnapshot()
@alanbsmith
alanbsmith / effective-testing-for-styled-components-icon-test.js
Created December 8, 2017 21:41
effective-testing-for-styled-components-icon-test
// lib/elements/Icon/__tests__/index.js
import React from 'react';
import Icon from '../index';
import 'jest-styled-components';
import renderer from 'react-test-renderer';
describe('Icon Element', () => {
it('renders correctly', () => {
const tree = renderer.create(
@alanbsmith
alanbsmith / effective-testing-for-styled-components-icon-updated.js
Created December 8, 2017 21:44
effective-testing-for-styled-components-icon-updated
// lib/elements/Icon/index.js
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import FontAwesome from 'react-fontawesome';
import { omit } from 'lodash';
function UnstyledIcon(props) {
const iconProps = omit(props, ['modifiers']);
@alanbsmith
alanbsmith / effective-testing-for-styled-components-simple-icon.js
Last active December 8, 2017 21:46
effective-testing-for-styled-components-simple-icon
...
const Icon = styled(FontAwesome)`
font-size: 1rem;
`;
...
@alanbsmith
alanbsmith / effective-testing-for-styled-components-test-imports.js
Created December 8, 2017 21:48
effective-testing-for-styled-components-test-imports
// lib/blocks/Button/__tests__/index.js
import React from 'react';
import Button from '../index';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
@alanbsmith
alanbsmith / effective-testing-for-styled-components-better-test-output.sh
Created December 8, 2017 21:49
effective-testing-for-styled-components-better-test-output
$ yarn test
FAIL lib/blocks/Button/__tests__/index.js
Button Block
✕ renders correctly (24ms)
● Button Block › renders correctly
expect(value).toMatchSnapshot()
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-block.js
Last active December 8, 2017 21:57
effective-testing-for-styled-components-button-block
// lib/blocks/Button/index.js
…
import { applyStyleModifiers } from 'styled-components-modifiers';
const modifierConfig = {
primary: () => `
background-color: #7E5BEF;
`,
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-test-complete.js
Created December 8, 2017 22:00
effective-testing-for-styled-components-button-test-complete
// lib/blocks/Button/__tests__/index.js
import React from 'react';
import Button from '../index';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
describe('Button Block', () => {
it('renders correctly', () => {
const tree = renderer.create(
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-styles-with-theme.js
Created December 8, 2017 22:02
effective-testing-for-styled-components-button-styles-with-theme
// lib/blocks/Button/__tests__/index.js
const modifierConfig = {
primary: ({ theme }) => `
background-color: ${theme.colors.primary};
`,
secondary: ({ theme }) => `
background-color: ${theme.colors.secondary};
`,
@alanbsmith
alanbsmith / effective-testing-for-styled-components-button-test-with-theme.js
Created December 8, 2017 22:05
effective-testing-for-styled-components-button-test-with-theme
// 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', () => {