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演示

React 测试库不渲染 Emotion CSS

React testing library not rendering Emotion CSS

emotion

reactjs

react-testing-library