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>
`;

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