Как можно делать тесты моментальных снимков с помощью стилизованных компонентов 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 [JS]](https://i.imgur.com/WsjO6zJb.png)


Нашел ответ здесь и все работает! Компонент глобального стиля будет «жить» в теге <head>, а не внутри <body>, поэтому «вы должны были целиться в голову».
Вот мой рабочий пример:
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();
});