oblador / loki

👁 Visual Regression Testing for Storybook
https://loki.js.org/
MIT License
1.78k stars 173 forks source link

Issue with CI and loki, storybook-static #523

Open KrisWis opened 3 months ago

KrisWis commented 3 months ago

I use loki in conjunction with storybook in my project and when running on my computer (npx loki test) the tests run correctly. But when running for CI Pipeline (npx loki --requireReference --reactUri file:./storybook-static) after storybook build I get the following error:

/home/runner/.npm/_npx/d181a4fc59dca216/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

TypeError: The “data” argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at writeFile (node:fs:2285:5)
    at go$writeFile (/home/runner/.npm/_npx/d181a4fc59dca216/node_modules/graceful-fs/graceful-fs.js:138:14)
    at Object.writeFile (/home/runner/.npm/_npx/d181a4fc59dca216/node_modules/graceful-fs/graceful-fs.js:135:12)
    at /home/runner/.npm/_npx/d181a4fc59dca216/node_modules/fs-extra/lib/output/index.js:18:27
    at /home/runner/.npm/_npx/d181a4fc59dca216/node_modules/universalify/index.js:21:38 {
  code: 'ERR_INVALID_ARG_TYPE'
}

I get this error also when running this command on my computer. And I was able to solve this error on my computer by following this answer, but first of all how can I change create-chrome-target.js for CI, and secondly on my computer now I see the same pattern in tests:

...
 FAIL  chrome.app/chrome.iphone7/Pages/MainPage      
       Primary
       Timeout after 10000ms
 FAIL  chrome.app/chrome.iphone7/Pages/CatalogPage   
       Primary
       Operation timed out after 60000ms
 FAIL  chrome.app/chrome.iphone7/Pages/InternalPage  
       Primary
       Operation timed out after 60000ms
 FAIL  chrome.app/chrome.iphone7/Pages/MyProjectsPage
       Primary
       Operation timed out after 60000ms
...

I would welcome any help and am willing to provide any information needed to do so. My loki config is in package.json:


 “loki”: {
    ``` “configurations”: {
      { “chrome.laptop”: {
        { “target”: { “chrome.app”,
        “width": 1366,
        “height": 768,
        “deviceScaleFactor": 1,
        “mobile": false
      },
      “chrome.iphone7": 
{
        { “target”: { “chrome.app”,
        { “preset”: “iPhone 7”
      }
    }
  },
  }, “overrides”: {
    { “loki”: {
      { “@storybook/react”: “$@storybook/react”.
    }
  }```
Vallix commented 2 weeks ago

It seems there was a similar issue. The project uses a custom font, and the font's name contains spaces, for example, My font.woff2. It turned out that in the tests, such a font couldn't be resolved (local/../My%20font.woff2), and the test was failing due to a timeout. After changing the font name to My_font.woff2 and rebuilding Storybook, everything worked fine.

KrisWis commented 1 week ago

No, i have not fonts with names contains spaces in my project /;

Vallix commented 1 week ago

Try adding console.log('>>>', pendingRequestURLMap) at this line and check the test with a timeout; maybe something else isn't being resolved.

KrisWis commented 1 week ago

I realize that the problem is in the “create-chrome-target.js” file and I was able to solve it on my local computer by following this answer. But there is no way I can change the create-chrome-target.js file on the device used in CI Github Actions. Anyway, it's not so critical for me now since I'm using husky.