Set Jest to to load hydrogen styles

[petertgiles]

We sometimes use hydrogen styles for structural changes to the pages. Without the generated hydrogen.css file we can't test this in jest. Is there a way to configure this?

[brindasasi]

Communicate with the team if this is not going anywhere. Raise the alarm so we can go ahead with workaround.

[petertgiles]

I worked on this for a few hours but didn't get very far. Most answers that I found on Google were some variant of "Why are you trying to test styling in your unit tests?". Anyway, I'm going to throw this back in the queue in case anyone else wants to give it a whirl. I'm attaching some tests in case they help you get started, though.https://app.zenhub.com/files/364642496/53d75c6b-da80-4d02-b1a7-33709c3dd66b/download

[brindasasi]

I spent some time on it and couldn't get very far on this. Discussed with the team and putting this into backlog for now as it is exceeding its value vs effort.

[mnigh]

@petertgiles is this still an issue or has hydrogen 2.0 make this possible?

[petertgiles]

As far as I know it's still a problem though I haven't tried again since H2 2.0.

[mnigh]

@substrae is this issue something you would have any insight on?

[JoshBeveridge]

Hmm, I'm probably going to need more specific context on what you're trying to accomplish here. If "testing styling in jest" is a no go, then this isn't Hydrogen specific and is more likely an indication that we should be hiding/showing without CSS... though that seems like a pretty bad restriction.

[JoshBeveridge]

You might be able to test for whether the attribute itself is present on the element as a workaround. Assume Hydrogen is doing its job and test that the attribute is being properly set. After all, that's the logic that is being executed in the example.

[mnigh]

@petertgiles the example in the description is no longer in the codebase. is there another example you can provide where this is still a problem?

[petertgiles]

The frustrating thing is that this works fine with inline CSS. Here are the tests I wrote last year.

👉️ h2.test.tsx 👈️

```tsx /** * @jest-environment jsdom */ import "@testing-library/jest-dom"; import { render, screen } from "@testing-library/react"; import React from "react"; describe("hydrogen css tests", () => { test("test display visible using inline css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).toBeVisible(); }); test("test display invisible using inline css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).not.toBeVisible(); }); test("test display visible using hydrogen css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).toBeVisible(); }); test("test display invisible using hydrogen css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).not.toBeVisible(); }); test("test visibility visible using inline css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).toBeVisible(); }); test("test visibility hidden using inline css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).not.toBeVisible(); }); test("test visibility visible using hydrogen css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).toBeVisible(); }); test("test visibility hidden using hydrogen css", () => { render(

test text

, ); expect(screen.getByTestId("test-component")).not.toBeVisible(); }); }); ```

[esizer]

I feel like visual testing does not fall under the purview of jest and these types of tests are better suited to Cypress or storybook. Wondering if this could be closed and we add something to documentation about visual testing (assuming the team agrees).