TEST styled components

styled-components 테스트하기

button.js 의 테스트 코들를 작성하면서 이렇게 기록을 남긴다

jest-styled-components, react-test-renderer 를 이용하였다. 참고 문서

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'

const Button = styled.button`
  color: red;
`

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
  expect(tree).toHaveStyleRule('color', 'red')
})

아쉽게도 Object 를 한번에 확인해주는 method 는 지원해주지 않는다. 그래서 하나 만들었다 expect.extend 으로 만들면 좋을 듯 하다 참고 문서

const toHaveStyleRules = (component, property, options) => {
  let hyphen = ''
  _.each(property, (value, key) => {참고 문서
    hyphen = key.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`)
    expect(component).toHaveStyleRule(hyphen, value, options)
  })
}

가상 선택자, media query 시 style 은 다음과 같이 확인 할 수 있다

const Button = styled.button`
  @media (max-width: 640px) {
    &:hover {
      color: red;
    }
  }
`

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red', {
    media: '(max-width:640px)',
    modifier: ':hover',
  })
})