Styled-jsx: Snapshot testing with Styled JSX

[khrome83]

Background - When doing snapshot testing with Jest, any Styled JSX changes will trigger incorrect snapshots. This causes the user to run jest -u more often, increasing change of updating snapshots that should not be updated.

Question - Do we need a way to strip out the data-jsx={#########} out of snapshot creation as part of the Styled JSX library as a utility, should this be a external plugin to support snapshot testing, or is it best practice to snapshot test the style changes?

What is everyones thoughts?

[giuseppeg]

If the ID is changing it is because the CSS changed and therefore you may want to review and approve that. If styled-jsx bothers you probably you can remove the babel plugin when NODE_ENV is set to test or have a completely separate babel configuration for tests.

Do we need a way to strip out the data-jsx{#########} out of snapshot creation as part of the Styled JSX library as a utility

I wouldn't do that.

is it best practice to snapshot test the style changes

That's up to you if you want to test style changes too :)

[giuseppeg]

Will reopen in case the comment above didn't answer your question

[thealjey]

@giuseppeg I'm using styled-jsx with Next.js, can you help me figure out how to configure babel (or anything else) to have styled-jsx not generate random class names? I need something predictable to use with react shallow renderer

[giuseppeg]

@thealjey the classnames generated by styled-jsx are not random. They are an hash of the styles (or styles + props when using dynamic styles). Therefore they should change only when your css changes.

We would need something like this https://github.com/styled-components/jest-styled-components for styled-jsx but I don't have time to implement it.

If you trust styled-jsx to work maybe you can disable the babel plugin in tests - ask the Next.js folks (on slack or via issue) if there is a way to do so.

[thealjey]

@giuseppeg I do trust styled-jsx to work, and if you render the same component with the same styles, the classes (correctly) are also the same.
However, if the component is not the same, like in the case of tests, the ids are different.
e.g.

import ShallowRenderer from 'react-test-renderer/shallow';
import reactElementToJsxString from 'react-element-to-jsx-string';

const Alert = ({text}) =>
  <div>
    {text}

    <style jsx>{`
      div { color: #721c24; }
    `}</style>
  </div>;

const renderer = new ShallowRenderer();

renderer.render(<Alert text="something went wrong" />);

const message = 'passes text to Alert';
const actual = renderer.getRenderOutput();
const expected = (
  <div>
    something went wrong

    <style jsx>{`
      div { color: #721c24; }
    `}</style>
  </div>
);

equals(reactElementToJsxString(actual), reactElementToJsxString(expected), message);

Result:

expected: |-
        '<div className="jsx-3198161760">\n  something went wrong\n  <JSXStyle\n    css="div.jsx-3198161760{color:#721c24;}"\n    styleId="3198161760"\n  />\n</div>'
actual: |-
        '<div className="jsx-1585881641">\n  something went wrong\n  <JSXStyle\n    css="div.jsx-1585881641{color:#721c24;}"\n    styleId="1585881641"\n  />\n</div>'

[giuseppeg]

can you try to use <style jsx>{'div { color: #721c24; }'}</style> in both?

[thealjey]

that works for some reason. Why?
Do I have to write styles in one line, without line breaks now? :)

[giuseppeg]

haha no definitely not! My guess is that there were some indentation issues. I am not sure if it is worth fixing this right now since it might also be a breaking change somehow.

[thealjey]

Anyway, thank you for your help figuring this out! Have a nice day ;)