React-testing-library not rendering computed styles from stylesheet

Question

Basic scenario is such: I have a component which has width: 100% as defined in a stylesheet. Therefore it should retain the width of its parent component. I want to calculate the width of my component and apply it to my child component because I am rendering it via createPortal and I would like them to be the same width. This works in the browser. However, in my test, I am finding that window.getComputedStyle(component) is not returning any of the styles applied from the stylesheet.

As suggested, I could mock the javascript window, but that's actually counter to what I'm hoping to do, I think. I want to verify the behavior that is present in the browser, that window.getComputedStyle() returns all styles applied, not just the inline styles.

I have put a simple example into a codesandbox: https://codesandbox.io/s/goofy-wilson-6v4dp

Also here:

function App() {
  return (
    <div className="App">
      <WidthComponent />
    </div>
  ) 
}

function WidthComponent() {
  const myInput = useRef();
  const [inputWidth, setInputWidth] = useState(0);

  useEffect(() => {
    console.log("in handleLoad");
    const width = myInput.current ? myInput.current.offsetWidth : 0;
    setInputWidth(width);
  }, [myInput]);

  return (
    <div className="inherited-width" ref={myInput}>
      <div style={{ width: inputWidth }} className="child-element">
        Hello
      </div>
    </div>
  );
}

// test
test("width is inherited", () => {
  const { rerender } = render(
    <div style={{ width: "452px" }}>
      <WidthComponent />
    </div>
  );
  const element = document.getElementsByClassName("child-element").item(0);
  rerender(
    <div style={{ width: "452px" }}>
      <WidthComponent />
    </div>
  );
  expect(window.getComputedStyle(element).width).toBe("452px");
});

.App {
  font-family: sans-serif;
  text-align: center;
  width: 500px;
}

.inherited-width {
  width: inherit;
}

Any help is appreciated.

Blondell

The code sandbox is a nice extra, but you need to add a MVCE to your question so that your question can help others in the future. – Deonnadeonne

Does this answer your question? How to mock the JavaScript window object using Jest? – Deonnadeonne

I don't think so... I don't want to mock the window, I want it to behave as it does in the browser, which it doesn't seem to be doing. In the browser, window.getComputedStyle() returns all the styles, including those defined in a stylesheet, but it doesn't appear to be doing so in jest. Is this just a known limitation? – Blondell

The point here being that you probably need to mock the window. If you log it out, it's probably undefined. – Deonnadeonne

Did you ever figure this out? – Caravel

May have a look at this question and jest issue – Aeriform

Answer 1

However, in my test, I am finding that window.getComputedStyle(component) is not returning any of the styles applied from the stylesheet.

Note that if you're running your tests in JSDOM (i.e. every Jest test) then CSS isn't fully implemented. Specifically, the cascade part of CSS is not implemented (https://github.com/jsdom/jsdom/pull/2690). Inheritance is only partially implemented (display and visibility) (https://github.com/jsdom/jsdom/issues/2160).

I would suggest running tests that assert on computed styles only in browsers, not JSDOM. A codesandbox test is not running in an actual browser environment.

Lidda

Hi, How do you run a test that assert on computed styles in a browser ? – Accumbent