Inconsistent Snapshots on CI

[kawikadkekahuna]

• jest-glamor-react version: 3.2.2
• node version: 8.0
• npm (or yarn) version: Yarn: 0.27.5

Relevant code or config

test('Button with Children', () => {
    const ui = <Button>Hello World</Button>;
    expect(toJson(shallow(ui))).toMatchSnapshot('enzyme.shallow');
    expect(toJson(mount(ui))).toMatchSnapshot('enzyme.mount');
    expect(toJson(render(ui))).toMatchSnapshot('enzyme.render');
  });

import { configure } from 'enzyme';
import serializer from 'jest-glamor-react';
import Adapter from 'enzyme-adapter-react-16';
import { createSerializer } from 'enzyme-to-json';

expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));
expect.addSnapshotSerializer(serializer);

configure({ adapter: new Adapter() });

What you did:
Created snapshots locally, and ran build on CircleCI

What happened:

  expect(value).toMatchSnapshot()
    
    Received value does not match stored snapshot 1.
    
    - Snapshot
    + Received
    
    @@ -23,31 +23,39 @@
        -webkit-transition: 0.25s cubic-bezier(0.17, 0.67, 0.52, 0.97);
        -moz-transition: 0.25s cubic-bezier(0.17, 0.67, 0.52, 0.97);
      }
      
      .glamor-0:hover,
    - [data-glamor-0]:hover {
    + [data-glamor-0]:hover,
    + .glamor-0[data-simulate-hover],
    + [data-glamor-0][data-simulate-hover] {
        opacity: 0.7;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,.25);
        -webkit-transform: translateY(-1px);
      }
      
      .glamor-0:focus,
    - [data-glamor-0]:focus {
    + [data-glamor-0]:focus,
    + .glamor-0[data-simulate-focus],
    + [data-glamor-0][data-simulate-focus] {
        outline: 0;
        color: #fff;
      }
      
      .glamor-0:visited,
    - [data-glamor-0]:visited {
    + [data-glamor-0]:visited,
    + .glamor-0[data-simulate-visited],
    + [data-glamor-0][data-simulate-visited] {
        outline: 0;
        color: #fff;
      }
      
      .glamor-0:active,
    - [data-glamor-0]:active {
    + [data-glamor-0]:active,
    + .glamor-0[data-simulate-active],
    + [data-glamor-0][data-simulate-active] {
        transform: translateY(1px);
        color: #fff;
        -webkit-transform: translateY(1px);
      }
      

       8 |   test('Button with Children', () => {
       9 |     const ui = <Button>Hello World</Button>;
    > 10 |     expect(toJson(shallow(ui))).toMatchSnapshot('enzyme.shallow');
      11 |     expect(toJson(mount(ui))).toMatchSnapshot('enzyme.mount');
      12 |     expect(toJson(render(ui))).toMatchSnapshot('enzyme.render');
      13 |   });
      

Reproduction repository:

Problem description:

What seems to be happening is that on when the test run on CircleCI, it expects

     [data-glamor-0]:hover,
     .glamor-0[data-simulate-hover],
     [data-glamor-0][data-simulate-hover] 

, though when running tests locally they generate the snapshot with

 [data-glamor-0]:hover 
...

Suggested solution:
Still fuzzy on what exactly is happening

[kentcdodds]

I'm not sure what's going on either. Sorry :-/

Feel free to dig further! Good luck!

[kawikadkekahuna]

I think the issue might have something to do with what NODE_ENV is set prior to snapshot creation.

Creating snapshots with no NODE_ENV defined causes snapshots to be generated with

[data-glamor-0]:hover 

I was able to resolve the issue by setting the NODE_ENV to development, and then updating my snapshots.

I'm not sure if this is still a jest-glamor-react specific issue or if it's more of a Jest Issue

Would a possible solution be to default the NODE_ENV to be development if none is currently set?
Unfortunately, I won't have time to dive into the codebase until the weekend so I'm not sure if this is even a feasible answer.

[kentcdodds]

Hmmm... I think that the default is development. Things are only different with glamor when the NODE_ENV is explicitly set to production...

[youngrrrr]

+1. Also having this issue and setting NODE_ENV doesn't seem to help.

What's up with the data-simulate prefix? Any idea for where in the code this is being inserted? It's also interesting this doesn't seem to show up in this repo's src/__snapshots__.

[kentcdodds]

Try upgrading to the latest version (v4). Your snapshots will need updating. Then see if that fixes your CI issues.

[youngrrrr]

Still having the same problem of inconsistent snapshots, and this is on the latest version (v4.2.1). The issue appears whenever I pass any state-based styling to my components, e.g.:

<div className={glamor.css(":focus": { background: "#ACF" })}>

Snapshot:

.css-1:focus,
[data-css-1]:focus {
  background: #ACF;
}

Test failure output:

.css-1:focus,
- [data-css-1]:focus {
+ [data-css-1]:focus,
+ .css-1[data-simulate-focus],
+ [data-css-1][data-simulate-focus] {
     background: #ACF;
  }

I realize this description isn't super helpful. I'll try to provide more detail but I think this issue should be re-opened in the meantime.

[kentcdodds]

That appears to be because when you took the second snapshot you were running with simulation enabled it something.... Maybe a different certain of glamor or something. Either way that's not related to this original issue and it's very unlikely an issue with this project, but rather your glamor setup.