React testing library not rendering Emotion CSS - reactjs

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

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