Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken test isolation of VueRouter instances

See original GitHub issue

Describe the bug A clear and concise description of what the bug is.

VueRouter instances are not erased properly after completing a test case.

To Reproduce Steps to reproduce the behavior:

git clone git@github.com:maxarndt/vue-testing-library.git
npm i
npm test

Expected behavior

All tests should pass.

Screenshots

 FAIL  src/__tests__/vue-router.js
  ✓ full app rendering/navigating (51 ms)
  ✕ another app rendering/navigating (13 ms)
  ✓ setting initial route (6 ms)

  ● another app rendering/navigating

    TestingLibraryElementError: Unable to find an element with the text: /you are home/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <div>
          <a
            class="router-link-active"
            data-testid="home-link"
            href="#/"
          >

        Home

          </a>

          <a
            aria-current="page"
            class="router-link-exact-active router-link-active"
            data-testid="about-link"
            href="#/about"
          >

        About

          </a>

          <div>
            You are on the about page
          </div>

          <div
            data-testid="location-display"
          >
            /about
          </div>
        </div>
      </div>
    </body>

      29 |   const {getByTestId, getByText} = render(App, {routes})
      30 |
    > 31 |   expect(getByText(/you are home/i)).toBeInTheDocument()
         |          ^
      32 |   expect(getByTestId('location-display')).toHaveTextContent('/')
      33 |
      34 |   await fireEvent.click(getByTestId('about-link'))

      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:90:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
      at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:111:19)
      at _callee2$ (src/__tests__/vue-router.js:31:10)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:293:22)
      at Generator.next (node_modules/regenerator-runtime/runtime.js:118:21)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
      at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)

Related information:

@testing-library/vue version: HEAD at 7bef579
Vue version: "vue": "^2.6.12"
node version: v12.18.4
npm version: 6.14.9

Additional context

I just added two assertions to an already existent test case and duplicated the test to be executed twice in a row (see https://github.com/maxarndt/vue-testing-library/commit/306550fa8557c43adcdc5cf763143430b791ad30).

Both tests should pass if the testing environment is cleaned up properly. Unfortunately this is not the case.

Issue Analytics

State:
Created 3 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

blimmercommented, Jun 30, 2021

No problem! I agree that the initial push is useful for the FAQ. I opened https://github.com/testing-library/testing-library-docs/pull/881 for that improvement. Additionally - I tagged you in that PR with a contribution opportunity if you have the time!

1reaction

blimmercommented, Jun 29, 2021

@maxarndt - I ran into something weird today with the workaround I posted above. It appears that Vue Router adds a popstate listener to the global JSDOM window in hash mode. These popstate listeners are not cleaned up between tests, which caused additional “leaking” behaviors between tests.

Because of this, I recommend passing an instantiated router that uses abstract mode instead of resetting the window.location.

Top Results From Across the Web

In abstract mode, router doesn't load root path '/' on initial load.

To my test, $route.path always returned "/", no matter initial URL is root or root + "/bar".

vue-router — Uncaught (in promise) Error: Redirected from ...

I spent hours debugging this and got to the following results for the ugly Uncaught (in promise) Error: Redirected when going from ....

Vue Examples - Cypress Documentation

Using Vue Test Utils. In order to encourage interoperability between your existing component tests and Cypress, we support using Vue Test Utils' API....

Testing - Vue.js

Unit tests are written to verify that small, isolated units of code are working as expected. A unit test usually covers a single...

Separating a Vue project into modules | by Keagan Chisnall

I haven't yet tested any performance differences; but my gut tells me that for most cases, even if there are any, they won't...