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

Mic Fung · Accepted Answer · 2021-05-25 09:35:00Z

2

+50

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

edited May 25, 2021 at 9:35

answered May 24, 2021 at 19:49

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Alex Over a year ago

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

Mic Fung Over a year ago

Which version of react are you using?

Mic Fung Over a year ago

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.

Alex Over a year ago

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

Alex Over a year ago

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

|

Marat Zimnurov · Accepted Answer · 2023-02-13 23:40:09Z

0

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()
})

answered Feb 13, 2023 at 23:40

Marat Zimnurov

1,5542 gold badges12 silver badges16 bronze badges

Collectives™ on Stack Overflow

React testing library not rendering Emotion CSS

2 Answers 2

18 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related