Failing to load font files when using reactUri flag

[yis4yimmy]

First off, I'm really enjoying using Loki! We are building a component library on top of a couple open source libraries and Loki has been really helpful with catching regressions as we update global variables in the underlying libraries 💯

I hit an issue that I've seen in other open issues: #306 but seems to never have gotten a resolution.

In my case I am using a woff/woff2 font and it is failing to load when I use the reactUri pointed at the static storybook. Interestingly, when I just run loki test without the reactUri the tests pass as expected.

I was able to reproduce it here: https://github.com/yis4yimmy/loki-font-issue. Let me know if there's any other info you need.

[yis4yimmy]

I actually think this issue is caused by Storybook. I deployed our Storybook with the font updates and it is also failing to load, so I'll investigate a bit more and update here.

[techeverri]

Thanks for the update. I'll close the issue for now.

[yis4yimmy]

Hi @techeverri I did some more testing and found that the Storybook configuration in the loki-font-issue does produce a valid build. I did a bit more testing and it looks like the issue specifically occurs when testing against the docker chrome. I tested Loki by running an http-server against the static build directory and pointing the reactUri to it and the tests pass, so I think that rules out the Storybook configuration being invalid.

[techeverri]

I tested Loki by running an http-server against the static build directory and pointing the reactUri to it and the tests pass

Great! 👍

so I think that rules out the Storybook configuration being invalid.

Sorry, I don't understand this part

[yis4yimmy]

so I think that rules out the Storybook configuration being invalid.

I was worried that the Storybook guidelines were creating something that wasn't actually valid once it was compiled. I believe that testing it in the way that I did narrows down the scope of the issue to something specific to an issue with running the test in headless Chrome vs against a Chrome app. I'm very new to docker and headless chrome but I think the issue is headless chrome not being able to load the file.

I also was wondering if it was an issue with the font so I tested an image as well and it also failed in the same way.

[oblador]

@yis4yimmy If you change your paths to relative ones it works for me:

src: url("../assets/fonts/Inter-Regular.woff2") format("woff2"),
    url("../assets/fonts/Inter-Regular.woff") format("woff");

[yis4yimmy]

@oblador that did the trick! Thanks for having a look at it. I stared at this for too long to see the obvious solution. Tested it out locally as well as in our CI pipeline and the tests all pass!

[juanroldan1989]

Exactly 1 year after this issue was closed I'm having the same problem haha

url("../assets/fonts/Inter-Regular.woff2") format("woff2")

The adjustment above did not make the trick for me, looking into react apps adjustments for fonts path now

[HoneyQumo]

Good afternoon. Tell me, is there a solution to this problem?

[p3k]

Seeing a similar issue as @HoneyQumo:

❯ CHROME_PATH=/usr/bin/google-chrome ./node_modules/.bin/loki --requireReference --reactUri file:./client/build/storybook
loki test v0.31.2
(node:500934) NOTE: We are formalizing our plans to enter AWS SDK for JavaScript (v2) into maintenance mode in 2023.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the migration guide at https://a.co/7PzMCcy
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  chrome.app
       Fetching stories
       8 requests failed to load; 
       file:///home/tobi/Projects/dashboard/client/build/storybook/sb-common-assets/nunito-sans-regular.woff2, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/sb-common-assets/nunito-sans-italic.woff2, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/sb-common-assets/nunito-sans-bold.woff2, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/sb-common-assets/nunito-sans-bold-italic.woff2, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/sb-preview/runtime.js, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/runtime~main.19fb3bb7.iframe.bundle.js, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/1917.9c24a87c.iframe.bundle.js, 
       file:///home/tobi/Projects/dashboard/client/build/storybook/main.fd10c93a.iframe.bundle.js
Some visual tests failed to run

IMHO there is nothing I could do to fix or even change these paths, they are coming from Storybook…

[p3k]

ah got it, there is already an issue for this – and it even is fixed in 0.32 😄