React testing library not rendering Emotion CSS

Question

Running React Testing Library to generate snapshots on JSX which uses the Emotion css prop results in no CSS being rendered.

I have tried using the "@emotion/jest/serializer" but still no luck.

Component:

<button
      role="button"
      css={(theme)=> {
        backgroundColor: 'hotpink',
        '&:hover': {
          color: theme('lightgreen'),
        },
      }}
/>

Test:

import React from 'react';
import { render } from '@testing-library/react';
import { createSerializer } from '@emotion/jest';

import { Component } from './component';

expect.addSnapshotSerializer(createSerializer());

describe('IconComponent', () => {
  it('should match the snapshot for the given props', () => {
    const { asFragment } = render(<Component icon="knownIcon" />);
    
    expect(asFragment()).toMatchSnapshot();
  });

Snapshot: (This gets rendered as an anonymous object rather than CSS)

exports[` 1`] = `
<DocumentFragment>
  <button
    css="[object Object]"
    role="button"
  />
</DocumentFragment>
`;

Cussed

Answer 1

I think you are just missing the final step.

https://emotion.sh/docs/css-prop

Set the jsx pragma at the top of your source file that uses the css prop. This option works best for testing out the css prop feature ...... such as Create React App 4 then /** @jsx jsx / pragma might not work and you should use /* @jsxImportSource @emotion/react */ instead.

From the emotion doc, adding /* @jsxImportSource @emotion/react */ on the top of your component file helps css option to render probably in the test.

CustomButton.js

/** @jsxImportSource @emotion/react */

export function CustomButton() {
  return (
    <button
      css={{
        "backgroundColor": "hotpink",
        "&:hover": {
          color: "lightgreen"
        }
      }}
    ></button>
  );
}

Result

exports[`IconComponent should match the snapshot for the given props 1`] = `
<DocumentFragment>
  .emotion-0 {
  background-color: hotpink;
}

.emotion-0:hover {
  color: lightgreen;
}

<button
    class="emotion-0"
  />
</DocumentFragment>
`;

---

If you are not using create-react-app, use the follow instead:

/** @jsx jsx */
import { jsx } from '@emotion/react'

Here is the repo, you can clone it to test it.

---

Older Version

For older version of react (< 16.4), you will need to use back "@emotion/core" instead of "@emotion/react" to transpile the file in old way.

package.json

 "@emotion/core": "10.1.1",

Button.js

/** @jsx jsx */
import { jsx } from '@emotion/core' <--- use the @emotion/core to transpile the file in old way. 

import React from "react";

const Button = () => {
  return (
    <button
      css={{
        backgroundColor: "hotpink",
        "&:hover": {
          color: "lightgreen"
        }
      }}
    ></button>
  );
};

export default Button;

Here is the repo for demonstration

Dithyramb

Thanks for your suggestion but this is only for React 16.4.0 upwards. – Cussed

Which version of react are you using? – Dithyramb

updated the answer at the bottom. I think it is better to tell us which version of react and emotion you are dealing with next time. – Dithyramb

sure, its hard to know which info is required whilst keeping it as concise as possible. I appreciate the effort and will try out your updated suggestion and give you a shout, thanks – Cussed

I have checked and since we are using emotion.sh/docs/@emotion/babel-preset-css-prop this line is automatically added to the top of each file – Cussed

It seems like the babel plugin is adding @emotion/react instead of @emotion/core – Dithyramb

check if you are using @emotion/babel-preset-css-prop v11 or v10. If you are using 11, the import will be @emotion/react. I read the source code. v10 will import @emotion/core` so try npm install @emotion/[email protected] – Dithyramb

just try with pure react and babel with the plugins you mentioned. no problem on generating css class. too much unknown from your side, cross-check your setting with the repo github.com/michael-vascue/test-emotion-babel/blob/master/… – Dithyramb

I agree there is quite a bit of unknown but also no help online whatsoever for serialising Emotion using React Testing Library so was helping to get some concrete info. I will try upgrading as you suggest now, thanks again for your continuing help – Cussed

We are on "@emotion/babel-preset-css-prop": "11.2.0", – Cussed

should be 10.2.1 – Dithyramb

One difference here, you are using object notation for the css parameter, we use a function as there is a theme hoc. – Cussed

ok. didn't notice you change the question. will try adding theme – Dithyramb

are you using emotion-theming? – Dithyramb

dont't know which library you are using, the syntax is a bit different from emotion-theming. there is a missing () to wrap the color and &:hover object for returning and theme('lightgreen') is not valid in emotion-theming where theme is not a function – Dithyramb

tested with emotion-theming, no problem at all. But there is a need to provide ThemeProvider in the test so it can pass the theme params to children. github.com/michael-vascue/test-emotion-babel/blob/master/src/… – Dithyramb

I don't mind if I can earn bounty or not. Able to solve the problem is more important to me. If you cannot make it work, can you make a minimal example for me to work with? like the js file and package.json. – Dithyramb

Sure I will try to upload it tomorrow, everything is crazy busy today. – Cussed

Answer 2

Another solution https://emotion.sh/docs/testing#writing-a-test

import React from 'react'
import renderer from 'react-test-renderer'

const Button = props => (
  <button
    css={{
      color: 'hotpink'
    }}
    {...props}
  />
)

test('Button renders correctly', () => {
  expect(
    renderer.create(<Button>This is hotpink.</Button>).toJSON()
  ).toMatchSnapshot()
})

Celanese