How to inject Material-UI stylesheets into a jest/react-testing-library test?

Question

It seems that if you don't inject Material-UI stylesheets into a jest/react-testing-library test then jsdom will fail to get the correct styles from your components (e.g. running getComputedStyle(component) will return the incorrect styles for the component).

How you properly setup a jest/react-testing-library test so that the styles are correctly injected into the test? I've already wrapped the components in a theme provider, which works fine.

Answer 1

As a workaround reinserting the whole head (or the element where JSS styles are injected) before assertion seems to apply styles correctly with both getComputedStyle() and react testing library's toHaveStyle():

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";

test("test my styles", () => {
  const { getByTestId } = render(
    <div data-testid="wrapper">
      <MyButtonStyledWithJSS/>
    </div>
  );
  const button = getByTestId("wrapper").firstChild;
  document.head.innerHTML = document.head.innerHTML;
  expect(button).toHaveStyle(`border-radius: 4px;`);
});

This will still fail though when you're using dynamic styles, like:

myButton: {
  padding: props => props.spacing,
  ...
}

That's because JSS uses CSSStyleSheet.insertRule method to inject these styles, and it won't appear as a style node in the head. One solution to this issue is to hook into the browser's insertRule method and add incoming rules to the head as style tags. To extract all this into a function:

function mockStyleInjection() {
  const defaultInsertRule = window.CSSStyleSheet.prototype.insertRule;
  window.CSSStyleSheet.prototype.insertRule = function (rule, index) {
    const styleElement = document.createElement("style");
    const textNode = document.createTextNode(rule);
    styleElement.appendChild(textNode);
    document.head.appendChild(styleElement);
    return defaultInsertRule.bind(this)(rule, index);
  };
  // cleanup function, which reinserts the head and cleans up method overwrite
  return function applyJSSRules() {
    window.CSSStyleSheet.prototype.insertRule = defaultInsertRule;
    document.head.innerHTML = document.head.innerHTML;
  };
}

Example usage of this function in our previous test:

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";

test("test my styles", () => {
  const applyJSSRules = mockStyleInjection();
  const { getByTestId } = render(
    <div data-testid="wrapper">
      <MyButtonStyledWithJSS spacing="8px"/>
    </div>
  );
  const button = getByTestId("wrapper").firstChild;
  applyJSSRules();
  expect(button).toHaveStyle("border-radius: 4px;");
  expect(button).toHaveStyle("padding: 8px;");
});

Answer 2

This ultimately seems like an issue with JSS and various browser implementations like jsdom and and Blink (at least in Chrome). You can see it in Chrome when trying to modify/enable/disable these style rules (you can't).

The behavior appears to be a result of the JSS library using the CSSOM insertRule API. There's a stylesheet generated in the DOM for the styles we expect in our component, but the tag is empty - it's just used to link the shadow CSS back to the DOM. The styles are never written to the inline stylesheet in the DOM, and as a result, the getComputedStyle method does not return the expected results.

There's an open issue to address this behavior and make development easier.

I switched my custom components to styled-components, which does not have some of these idiosyncrasies. Material-UI is planning on transitioning soon as well.

Answer 3

I can't speak specifically to Material-UI stylesheets, but you can inject a stylesheet into rendered component:

import {render} from '@testing-library/react';
import fs from 'fs';
import path from 'path';

const stylesheetFile = fs.reactFileSync(path.resolve(__dirname, '../path-to-stylesheet'), 'utf-8');

const styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.innerHTML = stylesheetFile;

const rendered = render(<MyComponent>);
rendered.append(style);

You don't necessarily have to read from a file, you can use whatever text you want.

Answer 4

You could add this to a custom render function. After rendering, the function pulls the styles out of cssom and puts them into a style tag. Here is an implementation:

let customRender = (ui, options) => {
    let renderResult = render(ui, options);
    let styleElement = document.createElement("style");
    let styleText = "";
    for (let styleSheet of document.styleSheets) {
        for (let rule of styleSheet.cssRules) {
            styleText += rule.cssText + "\n";
        }
    }
    styleElement.textContent = styleText.slice(0, -1);
    document.head.appendChild(styleElement);
    // remove old style elements
    let emptyStyleElements = document.head.querySelectorAll('style[data-jss=""]');
    for (let element of emptyStyleElements) {
        element.remove();
    }
    return renderResult;
}