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