I am developing a react app with styled-components and unit tests writen with cypress. I have a problem with global styles. My GlobalStyles style is just normalize.css. The problem is that in the browser it looks fine and works fine, but in the cypress test environment, no global styles are applied, so the fonts are wrong, the body has margins, etc. This is not very important for testing, but I prefer to know that my app looks exactly the same while I do my tests. Can you help me?
GlobalStyle.js:
import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
...
`;
App.test.jsx:
import React from "react";
import { mount } from "@cypress/react";
import { App } from "./App";
import { GlobalStyle } from "./globalStyles";
it("renders hello world", () => {
mount(
<App>
<GlobalStyle />
</App>
);
cy.get("h1").contains("Hello world!");
});