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 1 year 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 (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T09:13:52.000Z (almost 8 years ago)
- Last Synced: 2025-03-29T08:22:39.224Z (about 1 year ago)
- Topics: css, jest, jest-utilities, jsxstyle, snapshot, snapshot-testing
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 6
- Watchers: 2
- 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