Nuclear Planning Manual

    jest-emotion-react

    0.0.2 • Public • Published

    jest-glamor-react

    Jest utilities for Glamor and React

    Build Status Code Coverage Dependencies version downloads MIT License

    All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

    Watch on GitHub Star on GitHub Tweet

    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:

    <h1
      class="css-1tnuino"
    >
      Hello World
    </h1>

    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;
    }
     
    <h1
      class="css-1tnuino"
    >
      Hello World
    </h1>

    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

    Terminal Screenshot

    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:

    import {matcher, serializer} from 'jest-glamor-react'
     
    expect.addSnapshotSerializer(serializer)
    expect.extend(matcher)

    Here are some components:

    import React from 'react'
    import * as glamor from 'glamor'
     
    function Wrapper(props) {
      const className = glamor.css({
        padding: '4em',
        background: 'papayawhip',
      })
      return <section className={`${className}`} {...props} />
    }
     
    function Title(props) {
      const className = glamor.css({
        fontSize: '1.5em',
        textAlign: 'center',
        color: 'palevioletred',
      })
      return <h1 className={`${className}`} {...props} />
    }

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

    import React from 'react'
    import renderer from 'react-test-renderer'
     
    test('react-test-renderer', () => {
      const tree = renderer
        .create(
          <Wrapper>
            <Title>Hello World, this is my first glamor styled component!</Title>
          </Wrapper>,
        )
        .toJSON()
     
      expect(tree).toMatchSnapshotWithGlamor()
    })

    Works with enzyme too:

    import * as enzyme from 'enzyme'
    import toJson from 'enzyme-to-json'
     
    test('enzyme', () => {
      const ui = (
        <Wrapper>
          <Title>Hello World, this is my first glamor styled component!</Title>
        </Wrapper>
      )
     
      expect(toJson(enzyme.shallow(ui))).toMatchSnapshotWithGlamor(`enzyme.shallow`)
      expect(toJson(enzyme.mount(ui))).toMatchSnapshotWithGlamor(`enzyme.mount`)
      expect(toJson(enzyme.render(ui))).toMatchSnapshotWithGlamor(`enzyme.render`)
    })

    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

    Keywords

    none

    Install

    npm i jest-emotion-react

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • tkh44