jest-glamor-react
Jest utilities for Glamor and React
The problem
If you use glamor
as your CSS-in-JS solution, and you use
snapshot testing with jest then you probably have some test
snapshots that look like:
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:
.css-1tnuino,[data-css-1tnuino] { font-size: 1.5em; text-align: center; color: palevioletred;} 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.
This builds on the work from @MicheleBertoli in
jest-styled-components
to bring a similar experience
to React projects that use glamor
.
Preview
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies
:
npm install --save-dev jest-glamor-react
Usage
At the top of your test file:
expectexpect
Here are some components:
{ const className = glamor return <section className=`` ...props />} { const className = glamor return <h1 className=`` ...props />}
And here's how we'd test them with react-test-renderer
:
Works with enzyme too:
Inspiration
As mentioned earlier, @MicheleBertoli's
jest-styled-components
was a huge inspiration for
this project. And much of the original code came from from that MIT Licensed
project. Thank you so much Michele! 👏
Other Solutions
I'm unaware of other solutions. Please file a PR if you know of any!
Contributors
Thanks goes to these people (emoji key):
Michele Bertoli 💻 📖 ⚠️ |
Kent C. Dodds 💻 📖 🚇 ⚠️ |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT