React测试库不渲染EmotionCSS

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

以上是React测试库不渲染EmotionCSS的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>