How to clear search from location after/before each test?

[mufasa71]

Hello, I couldn't find a way to clear location.search params between each tests, looks like its leaks to next test. Any suggestions? Example:

function MyComponent({ x }) {
  const location = useLocation()
  const history = useHistory()
  useEffect(() => {
    if (x) {
      history.push({ search: `?x={escape(x)}` })
    }
  }, [x])
  return <>{x ?? 'no x'}</>
}

describe('MyComponent', () => {
  it('should add param x', () => {
    mount(<MyComponent x="foo" />)
    cy.location().should(loc => {
      expect(loc.search).to.contain('x=foo')
    })
  })

 it('should not add param x', () => {
   cy.window().then(win => console.log(win.location.search)) // prints '?x=foo', but should be empty
   mount(<MyComponent />) // no x prop passed, location.search should be empty
   cy.location().should(loc => {
     expect(loc.search).to.not.contain('x=foo')  // <-- this fails, because location.search was preserved
   }))
  })
})

[JessicaSachs]

A few things:

1. Component testing doesn't need to use cy.window() or cy.location() like E2E does.

Cypress Component Testing executes in the same window instance as the spec, which means that you can do everything you'd usually do in a webpage inside of Cypress.

2. If you modify document.location.search programmatically to reset it between tests, it will trigger a full-page refresh and you will lose your spec page.

You need to use a <MemoryRouter> instead of the real document.location or window.history.

3. If you want to test real multi-page navigation, you need to use E2E tests.

[mufasa71]

Luckily I use react-router-dom in my project. I tried memory router and it works. But ideally cypress should warn if document.location.search is not cleared between tests, otherwise it creates false positives, which happens sometimes.