How to access local html in cypress out of the react src folder?

I have an application where I have cypress visual test. I have created a local HTML file in that folder and try to rendering it to the cypress code. But the target location always adding prefix of the local base URL to the HTML location. So how can I access that file?

<!-- language: js -->

it('visits local file', () => {
  cy.visit('chat.html')
  cy.contains('local file')
})

The folder structure I have...

app
  - src
  - test
    - index.html
    - cypress.test.ts

My test is in the test folder and it's a react app.

You can use a cy.mount() command, similar to Component testing but in an e2e test.

That way it's completely separate to baseUrl.

Cypress.Commands.add('mount', (html) => {
  const testEl = Cypress.$(html)
  cy.$$('body').append(testEl)
})

it('visits local file', () => {
  cy.readFile('./src/chat.html').then(chat => {
    cy.mount(chat)
  })

  cy.contains('local file')  
})

This passes for plain HTML, for example

// chat.html

<div>local file</div>

but since you have a React app chances are it will need mounting along with React itself.

In this case, the full Component test would be better.

For reference: React Component Testing

If you have a baseUrl set in your cypress config, Cypress will prepend any cy.visit() that has a relative URL with that value. So, if my baseUrl is http://localhost:8080, using cy.visit('chat.html') will attempt to visit http://localhost:8000chat.html.

To avoid this, you will have to clear the baseUrl.

it('visits local file', { baseUrl: null }, () => {
  cy.visit('./chat.html')
  cy.contains('local file')
})

Note: the above will clear the baseUrl only in that specific test. You can apply the same override in describe() and context() blocks as well.