@emotion/jest Styles added through the css prop to a styled component are not captured in snapshots

[yuryhtx]

Current behavior:

The styles added with the css prop to a styled component are not captured in Snapshots when using @emotion/jest, but are applied as expected in the app

To reproduce:

The below code produces the following snapshot (note the lack of the color orange and height 50 styles in the snapshot):

import { css } from "@emotion/react";
import styled from "@emotion/styled";

const StyledP = styled.p`
  color: pink;
`;

export const Test = () => {
  return (
    <div>
      <StyledP
        css={css`
          color: orange;
          height: 50px;
        `}
      >
        styled with css
      </StyledP>
    </div>
  );
};

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
.emotion-0 {
  color: pink;
}

<div>
  <p
    className="emotion-0"
  >
    styled with css
  </p>
</div>
`;

1. Create a styled component
2. Apply additional styles to it by adding a css prop
3. Take a snapshot
4. Observe the lack of the styles added through the css prop in the snapshot

Expected behavior:

The styles should reflect the actual render on the web, and include the styles that are added through the css prop on styled components

Environment information:

"react": "^18.2.0",
"@emotion/jest": "^11.11.0"
"@emotion/react": "^11.11.1",