Javascript 样式化组件-测试createGlobalStyle

如何使用样式化组件createGlobalStyle进行快照测试

测试使用jest v22.4.4和样式化组件v4.1.2、react v16.7和jest样式化组件v5.0.1以及react测试渲染器v16.6.3运行

快照的输出没有css。但是我需要一种方法来测试css是否有变化

例如

还有一个测试

import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

import { BaseCSS } from '../src';

test('test if e', () => {
  const tree = renderer.create(<div><BaseCSS /> Test</div>).toJSON();
  expect(tree).toMatchSnapshot();
});

从“React”导入React；
从“反应测试渲染器”导入渲染器；
导入“jest样式的组件”；
从“../src”导入{BaseCSS}；
测试（'testif e'，（）=>{
const tree=renderer.create（Test）.toJSON（）；
expect（tree.toMatchSnapshot（）；
});

编辑：

快照的输出如下所示：（快照中没有css）

导出[`testif e1`]=`
试验
`;

我找到了一个答案，而且很有效！ 全局样式组件将“活动”在标记中，而不是在so“您应该瞄准头部”中

以下是我的工作示例：

import "jest-styled-components";
import React from "react";
import renderer from "react-test-renderer";
import GlobalStyle from "../../src/styles/GlobalStyle.js";

it("should have global style", () => {
  renderer.create(<GlobalStyle />);
  expect(document.head).toMatchSnapshot();
});

导入“jest样式的组件”；
从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“../../src/styles/GlobalStyle.js”导入GlobalStyle；
它（“应该具有全局风格”，（）=>{
create（）；
expect（document.head）.toMatchSnapshot（）；
});

exports[`test if e 1`] = `
  <div>
     Test
  </div>
`;

import "jest-styled-components";
import React from "react";
import renderer from "react-test-renderer";
import GlobalStyle from "../../src/styles/GlobalStyle.js";

it("should have global style", () => {
  renderer.create(<GlobalStyle />);
  expect(document.head).toMatchSnapshot();
});