Библиотека тестирования React не отображает Emotion CSS

Я думаю, вам не хватает последнего шага.

https://emotion.sh/docs/css-prop

Установите прагму jsx в верхней части исходного файла, который использует опору css. Этот вариант лучше всего подходит для тестирования функции css prop ... например, Create React App 4, тогда / ** @jsx jsx / pragma может не работать, и вам следует использовать / * @jsxImportSource @ эмоция / реакция * / вместо этого.

Из документа по эмоциям добавление /* @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-response-app, используйте вместо этого следующее:

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

Вот репо, вы можете клонировать его, чтобы протестировать.

Старая версия

Для более старой версии response (‹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;

Вот репо для демонстрации.