Fonts are not applying in tests

[taninnazar]

While running tests I see warning messages in browser console and also font are not applying to texts in test. Any ways to avoid that ?

Desktop (please complete the following information):

OS: Windows
Cypress Version 4.8.0
cypress-react-unit-test 4.5.0

[bahmutov]

Hmm, can you create an example to recreate this? It might be true, but I don't have enough information to help

[taninnazar]

Will try to add some example later. But for now - can you confirm that url for font should be http://localhost:65137/__cypress/iframes/component/component-library/Feedback/AlertBox/static/media/Inter-Regular.1e081edc.woff2 but not http://localhost:65137/static/media/Inter-Regular.1e081edc.woff2 ?

[bahmutov]

this looks close to #140 but without a reproduction, I cannot tell

[taninnazar]

@bahmutov ok, it looks similar to the issue #140. But I didn't get how to fix. I pushed example based on your repo (https://github.com/bahmutov/try-cra-app-typescript). Here is a branch with new font and there is same error while running test - https://github.com/taninnazar/cypress-cra-typescript/tree/error-on-loading-fonts

[taninnazar]

@bahmutov finally, I got it working. But it looks not very nice. Can this be fixed on Cypress side ?
Anyway, thanks for useful redirect. FYI my solution (as we don't have any css in our project)-

[bahmutov]

I will take a look later if I find time

[taninnazar]

ok, are there any ways for now to apply this options object to all components inside mount() but not to add this in each mount?

[bahmutov]

No, but because this is a regular function, you can create your own wrapper Gleb

…

On Mon, Jun 15, 2020 at 10:32 AM Nazar ***@***.***> wrote: ok, are there any ways for now to apply this options object to all components inside mount() but not to add this in each mount? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#284 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQ4BJXFKUIUHNHOVDD7J4LRWYWHNANCNFSM4N4G3JIA> .

-- Dr. Gleb Bahmutov, PhD Schedule video chat / phone call / meeting with me via https://calendly.com/bahmutov gleb.bahmutov@gmail.com @bahmutov <https://twitter.com/@bahmutov> https://glebbahmutov.com/ https://glebbahmutov.com/blog https://github.com/bahmutov

[bahmutov]

Screenshot of resources loading:

Notice that SVG image is loading correctly, we can see the response

But the font file is NOT loading correctly (it responds with the iframe itself as a fallthrough)

The difference is in the URL: we insert a loader for images that redirects all images to load from /__root

but the fonts are still being loaded from relative path to iframe

Proposal

Insert a loader that directs all relative fonts to be loaded from the /__root just like the image loader does

[bahmutov]

Could be similar to image redirect here https://github.com/bahmutov/cypress-react-unit-test/blob/master/plugins/utils/add-image-redirect.js

[bahmutov]

More complicated than that, since we have to work with the existing style-loader and css-loader

const a = {
  test: /\.css$/,
  exclude: /\.module\.css$/,
  use: [
    "/Users/gleb/git/cypress-react-unit-test/node_modules/style-loader/index.js",
    {
      loader:
        "/Users/gleb/git/cypress-react-unit-test/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js",
      options: { importLoaders: 1, sourceMap: false },
    },
    {
      loader:
        "/Users/gleb/git/cypress-react-unit-test/node_modules/postcss-loader/src/index.js",
      options: {
        ident: "postcss",
        plugins: [(Function: plugins)],
        sourceMap: false,
      },
    },
  ],
  sideEffects: true,
};

[bahmutov]

🎉 This issue has been resolved in version 4.7.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀