Question

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

测试正在使用jest v22.4.4和样式组件v4.1.2，react v16.7和jest样式组件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>
`;

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

样式化的组件-测试createGlobalStyle

1 个答案: