message: lint test example
diff: import React from 'react'
  // 1. uncomment this line and change "SomeComponent"
  // import SomeComponent from '../SomeComponent'
  -import theme from '../theme'
  +import {colors} from '../theme'
  import {render, renderStyles} from '../utils/testing'
  import {COMMON} from '../system-props'
  -// 2. remove the leading "x" from this line to enable the test
  -xdescribe('SomeComponent', () => {
  +// 2. remove this definition; it's just for eslint
  +function SomeComponent() {}
  +// 3. remove the leading "x" from this line to enable the test
  +xdescribe('SomeComponent', () => {
  // if applicable, ensure that this is a "system component"
  it('is a system component', () => {
  expect(SomeComponent.systemComponent).toBe(true)
  @@ -18,11 +20,15 @@ xdescribe('SomeComponent', () => {
  expect(SomeComponent).toImplementSystemProps(COMMON)
  })
  + it('matches the snapshot', () => {
  + expect(render(<SomeComponent />)).toMatchSnapshot()
  + })
  +
  // this is generally how you test that a prop renders one or more styles
  it('renders "x" prop into styles', () => {
  // use the .toMatchKeys() to test a subset of the rendered styles
  expect(renderStyles(<SomeComponent scheme="green" />)).toMatchKeys({
  - 'background-color': theme.colors.green[5]
  + 'background-color': colors.green[5]
  })
  // or use .toEqual() if:
  @@ -30,12 +36,11 @@ xdescribe('SomeComponent', () => {
  // * you know the other ("base") styles that your component should
  // render, and you can spread them into the result
  const defaultStyles = {
  - color: theme.colors.bodytext
  + color: colors.bodytext
  }
  expect(renderStyles(<SomeComponent scheme="green" />)).toEqual({
  ...defaultStyles,
  - 'background-color': theme.colors.green[5]
  + 'background-color': colors.green[5]
  })
  })
  -
  })
  