styled-components - 测试 createGlobalStyle答案

【问题标题】：styled-components - test createGlobalStylestyled-components - 测试 createGlobalStyle
【发布时间】：2019-05-11 03:52:30
【问题描述】：

如何使用 styled-components createGlobalStyle 进行快照测试？

使用 jest v22.4.4 和 styled-components v4.1.2、react v16.7 和 jest-styled-components v5.0.1 和 react-test-renderer v16.6.3 运行测试

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

例如

const BaseCSS = createGlobalStyle`
  a { color: red };
`;

还有一个测试

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();
});

编辑：

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

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

【问题讨论】：

标签： javascript reactjs jestjs styled-components

【解决方案1】：

我找到了答案here 并且有效！全局样式组件将“存在”在

标记中，而不是内部，因此“您应该瞄准头部”。

这是我的工作示例：

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();
});

【讨论】：