styled-components - 测试 createGlobalStyle

Posted 2023-02-22

【中文标题】styled-components - 测试 createGlobalStyle

【英文标题】：styled-components - test 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>
`;

【参考方案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();
);