reactjs - React 测试库不渲染 Emotion CSS

Question

运行 React 测试库以在使用 Emotion css 属性的 JSX 上生成快照，导致没有渲染任何 CSS。
我试过使用“@emotion/jest/serializer”，但仍然没有运气。
组件:

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

测试:

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

快照:
(这被呈现为匿名对象而不是 CSS)

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

Answer 1

我认为你只是错过了最后一步。
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.

来自情感文档，添加 /* @jsxImportSource @emotion/react */组件文件顶部的帮助 css可能在测试中呈现的选项。
CustomButton.js

/** @jsxImportSource @emotion/react */

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

结果

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

如果您没有使用 create-react-app，请改用以下内容:

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

这是 repo ，你可以克隆它来测试它。

旧版本
对于旧版本的 react (< 16.4)，您需要使用 back "@emotion/core"而不是 "@emotion/react"以旧方式转换文件。
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;

这是 repo演示用