https://cypress.io logo
Powered by
[SOLVED] Vite component testing: fetch() not worki...
# i-need-help
h
inside a component i'm testing there's a 
fetch("path/to/dump.yaml").then(...)
it returns 200, but it's this HTML instead of the YAML i'm expecting. works fine outside of cypress. components which don't load this work fine too.
Copy code
html
<!DOCTYPE html>
<html>
  <head>
        <script type="module" src="/__cypress/src/@vite/client"></script>
      
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
  </head>
  <body>
    <div data-cy-root></div>
  
        <script>// This file is merged in a <script type=module> into index.html
// it will be used to load and kick start the selected spec

const CypressInstance = window.Cypress = parent.Cypress

const importsToLoad = []

/* Support file import logic, this should be removed once we
 * are able to return relative paths from the supportFile
 * Jira #UNIFY-1260
 */
const supportFile = CypressInstance.config('supportFile')
const projectRoot = CypressInstance.config('projectRoot')
const devServerPublicPathRoute = CypressInstance.config('devServerPublicPathRoute')

if (supportFile) {
  let supportRelativeToProjectRoot = supportFile.replace(projectRoot, '')

  if (CypressInstance.config('platform') === 'win32') {
    const platformProjectRoot = projectRoot.replaceAll('/', '\\')

    supportRelativeToProjectRoot = supportFile.replace(platformProjectRoot, '')
  }

  // We need a slash before /cypress/supportFile.js, this happens by default
  // with the current string replacement logic.
  importsToLoad.push({
    load: () => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`),
    absolute: supportFile,
    relative: supportRelativeToProjectRoot,
    relativeUrl: `${devServerPublicPathRoute}${supportRelativeToProjectRoot}`,
  })
}

// Using relative path wouldn't allow to load tests outside Vite project root folder
// So we use the "@fs" bit to load the test file using its absolute path
// Normalize path to not include a leading slash (different on Win32 vs Unix)
const normalizedAbsolutePath = CypressInstance.spec.absolute.replace(/^\//, '')
const testFileAbsolutePathRoute = `${devServerPublicPathRoute}/@fs/${normalizedAbsolutePath}`

/* Spec file import logic */
// We need a slash before /src/my-spec.js, this does not happen by default.
importsToLoad.push({
  load: () => import(testFileAbsolutePathRoute),
  absolute: CypressInstance.spec.absolute,
  relative: CypressInstance.spec.relative,
  relativeUrl: testFileAbsolutePathRoute,
})

if (!CypressInstance) {
  throw new Error('Tests cannot run without a reference to Cypress!')
}

// load the support and spec
CypressInstance.onSpecWindow(window, importsToLoad)

// then start the test process
CypressInstance.action('app:window:before:load', window)

// Before all tests we are mounting the root element,
// Cleaning up platform between tests is the responsibility of the specific adapter
// because unmounting react/vue component should be done using specific framework API
// (for devtools and to get rid of global event listeners from previous tests.)
CypressInstance.on('test:before:run', () => {
  // leave the error overlay alone if it exists
  if (document.body.querySelectorAll('vite-error-overlay').length) {
    // make the error more readable by giving it more space
    Cypress.action('cy:viewport:changed', { viewportWidth: 1000, viewportHeight: 500 })

    return
  }

  // reset the viewport to default when in normal mode
  Cypress.action('cy:viewport:changed', {
    viewportWidth: Cypress.config('viewportWidth'),
    viewportHeight: Cypress.config('viewportHeight'),
  })
})

// Make usage of node test plugins possible
window.global = window
window.process = typeof process !== 'undefined' ? process : {}
</script>
        </body>
</html>
It's requesting relative to 
__tests__
instead of the public file dir
had to do
Copy code
js
    fetch(new URL("../path/to/dump.yaml", import.meta.url)).then(...)
w
Even though you solved it I’m glad you reported this, it’s maybe something we can call out better. The components aren’t served from your usual app server so relative paths are likely to misbehave.
h
absolutely
...and it doesn't work in prod
but only in real prod somehow, it works fine in 
vite preview
or serving locally from a build

https://cdn.discordapp.com/attachments/1105509262840582205/1106078282652340244/image.png▾

I wrote this
Copy code
ts
const data_url = import.meta.url.split("/").slice(0, -2).join("/") + "/fleetwright-meta/junctspace.yaml";
const sample_url = import.meta.url.split("/").slice(0, -2).join("/") + "/samples.yaml";
3 Views
PreviousNext
Powered by