https://github.com/jaredpalmer/jest-jsxstyle

🃏 Jest utilities for JSXStyle
https://github.com/jaredpalmer/jest-jsxstyle

css jest jest-utilities jsxstyle snapshot snapshot-testing

Last synced: about 2 months ago
JSON representation

🃏 Jest utilities for JSXStyle

• Host: GitHub
• URL: https://github.com/jaredpalmer/jest-jsxstyle
• Owner: jaredpalmer
• Created: 2017-08-03T17:37:56.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-22T09:13:52.000Z (over 6 years ago)
• Last Synced: 2024-12-10T15:13:48.448Z (2 months ago)
• Topics: css, jest, jest-utilities, jsxstyle, snapshot, snapshot-testing
• Language: JavaScript
• Homepage:
• Size: 120 KB
• Stars: 6
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jest-jsxstyle

Jest utilities for jsxstyle

## The problem

If you use [`jsxstyle`](https://github.com/smyte/jsxstyle) as your CSS-in-JS solution, and you use

[snapshot testing][snapshot] with [jest][jest] then you probably have some test

snapshots that look like:

```html



  Hello World



```


And that's not super helpful from a styling perspective. Especially when there

are changes to the class, you can see that it changed, but you have to look

through the code to know _what_ caused the class name to change.

## This solution

This allows your snapshots to look more like:

```html

._15clmrq {

  color:red;

  display:block;

}



  Hello World



```


This is much more helpful because now you can see the CSS applied and over time

it becomes even more helpful to see how that changes over time.

## Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and

should be installed as one of your project's `devDependencies`:

```

npm install --save-dev jest-jsxstyle

```

## Usage

At the top of your test file:

```javascript

import serializer from 'jest-jsxstyle'

expect.addSnapshotSerializer(serializer)

```

Or in your Jest serializer config:

```javascript

{

  "snapshotSerializers": [

    "jest-jsxstyle"

  ]

}

```

And here's how we'd test them with `react-test-renderer`:

```javascript

import React from 'react'

import renderer from 'react-test-renderer'

test('react-test-renderer', () => {

  const tree = renderer

    .create(

      

        

          Hello World, this is my first jsxstyle component!

        

      

    )

    .toJSON()

  expect(tree).toMatchSnapshot()

})

```

Works with enzyme too:

```javascript

import * as enzyme from 'enzyme'

import toJson from 'enzyme-to-json'

test('enzyme', () => {

  const ui = (

    

      

        Hello World, this is my first jsxstyle component!

      

    

  )

  expect(toJson(enzyme.shallow(ui))).toMatchSnapshot(`enzyme.shallow`)

  expect(toJson(enzyme.mount(ui))).toMatchSnapshot(`enzyme.mount`)

  expect(toJson(enzyme.render(ui))).toMatchSnapshot(`enzyme.render`)

})

```

# Inspiration

- [`jest-styled-components`](https://github.com/styled-components/jest-styled-components)

- [`jest-glamor-react`](https://github.com/kentcdodds/jest-glamor-react)

## LICENSE

MIT

[glamor]: https://www.npmjs.com/package/glamor

[snapshot]: http://facebook.github.io/jest/docs/snapshot-testing.html

[jest]: http://facebook.github.io/jest/

[MicheleBertoli]: https://github.com/MicheleBertoli

[KentCDodds]: https://github.com/kentcdodds

[jest-styled-components]: https://github.com/styled-components/jest-styled-components

[`jest-glamor-react`]: https://github.com/kentcdodds/jest-glamor-react