Emotion: Hashes are different in CI

[ericclemmons]

• emotion version: 7.0.12
• react version: 15.4.2

What you did:

• Ran tests in CI:

  $ jest
  

What happened:

Problem description:

Hashes seem to be based on the time the file was written, which may make sense in production, but definitely doesn't make sense in a dockerized CI environment:

https://github.com/tkh44/emotion/blob/844b44903da71e982fcf5014c1d7be3619474f54/src/babel.js#L142

Suggested solution:

• When NODE_ENV="test" use a different seed?
• Only use the file stat when NODE_ENV="production"?

[mitchellhamilton]

The hashes shouldn't be different in CI, the hashes aren't based on time. One of the hashes is based on the file path to the nearest package.json, the name in the package.json, the contents of the file and an index of the component in the file. The other hash is based on the styles and will only change when the styles change.

Also, in general for testing, you should use jest-glamor-react because it will show the styles in the snapshot and replace the hashes with an index so snapshots don't change when the hash changes.

import serializer from 'jest-glamor-react'
import { sheet } from 'emotion'

expect.addSnapshotSerializer(serializer(sheet))

[ericclemmons]

I'd like to research why the hashes are different amongst these two environments. jest-glamor-react introduces other failures (like undefined:1:1358: missing '}').

[ericclemmons]

Confirmed with NPM_TOKEN="..." drone exec that the hashes are indeed different.

I wonder if it's a linux thing?

[ericclemmons]

I had a coworker try this out:

Alright. I spent way too long in the emotion codebase, trying to get jest-glamor-react to work, and trying to upgrade jest only to come up empty handed with emotion.

I was still seeing the same behavior you saw @ericclemmons where the hashes were different locally and on CI, and additionally, I saw the hashes change on me locally without me changing styles. At this point, it seems like emotion isn't ready for primetime (at least when involved with jest snapshot testing).

Closing because we really don't know what to do. My best guess is that hashes are changing because of line-endings or spacing changes. (Newlines are inserted automatically on-save) So perhaps emotion is hashing the string contents instead of JSON.stringify(rules) or similar.

I really don't know, but we're forced back to s-c.

(Just wanted to leave an FYI for the team. We tried 🤷‍♂️ )

[ericclemmons]

Our ./bin/test script has --no-cache for NODE_ENV=development. Not for NODE_ENV=test.

No idea why this matters. Trying to figure that out...

[phyrog]

I'm having the same issue right now. Would you re-open this issue, so that this can get resolved? Running the tests on Travis results in an extra css class that is not there when run locally.

[vospascal]

@phyrog & @ericclemmons did you find a solution in the end?

[phyrog]

Nope, we postponed using emotion indefinitely and continued using styled-components.

[vospascal]

@phyrog i opend up an issue #768 might help to bad you could not move to Emotion its very Nice and Speedy. Not beeing able to run in Bamboo or jenkins would be a show stopper for me aswell because its the only way to do professional software development in my opinion

[vospascal]

@phyrog & @ericclemmons https://github.com/emotion-js/emotion/blob/master/docs/testing.md using jest-emotion this is the solution to the problem!

[phyrog]

We did try jest-emotion, but that resulted in another (empty) class being added in CI.

[PiotrKujawa]

This should also resolve your problem

jest.mock('@emotion/styled-base', () => {
    const original = jest.requireActual('@emotion/styled-base').default;
    let seed = 0;
    return (tag, options) => original(tag, { ...options, target: `${seed++}` });
});