Test component background color with primary fails but works in the browser.

[nkint]

Hi!

First of all thanks for the great project, I really love the approach. I'm trying to build a component that internally use theme-ui.

I have a simple MWE (minimum working example) to reproduce the problem in this repository.

If I use color name (like tomato) the test pass but if I use primary the test fails. Sound strange to me because in the browser everything. works as expected.

You can see here the component and here the test. If you change this line the test pass as I'm expecting.

I think that the problem is on how css in injected in the dom and maybe I have to tell somehow to the test to wait for the css to be loaded and the css variable var(--theme-ui-colors-primary) to be injected in the dom.

Maybe is the wrong way to test it? Any hints? Thanks in advance!

[nkint]

Hi! I updated to the last version of theme-ui and the problem is not resolved. Any hints?

[lachlanjc]

Hi there! I appreciate the reproduction test but to be honest I don’t understand what the issue is here. Are you running into a problem with the rendering of your theme values/CSS variables?

[nkint]

Hi 🙏 thanks to have a look at this.
I have no problem in the browser but I have problem in testing. Did you try to run the test?
The test is failing to render the right theme values/CSS variables.