Closed maxarndt closed 3 years ago
What I've found out so far:
render
creates a new VueRouter
.
If you inspect the currentRoute
on that VueRouter it is /
as expected. If you push a route onto it, everything behaves as expected.
It seems localVue
passes down the route from the test before while VueRouter
is initialized with a new history.
We should try to break down the behavior of VueRouter
inside createLocalVue
and check with them if the carry over from one local vue instance to another is by design.
Hi!
Yeah, this mostly looks like a bug on VTU' localVue
… mind opening an issue there?
Thanks for this!
render creates a new VueRouter. If you inspect the currentRoute on that VueRouter it is / as expected. If you push a route onto it, everything behaves as expected.
Can you explain how to push a route on to the VueRouter created by render()? I'm trying to test a component that gets a route parameter and it currently is not working.
@maxarndt - I opened up #238 as a proposed solution to fix this issue. I also tested it against your fork and confirmed that this fix resolves the problem you surfaced.
Alternatively, as a quicker solution, you can set up a global beforeEach
(via setupFilesAfterEnv
) that resets the hash route before each test. e.g.,
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['./jest.setup.js'],
};
// ./jest.setup.js
beforeEach(() => {
window.location.replace('http://localhost/');
});
:tada: This issue has been resolved in version 5.8.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
@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
.
@blimmer thank you for your hard work on this!
I tried to use an instantiated router that uses abstract
mode for my tests and stumbled across https://github.com/vuejs/vue-router/issues/729.
In abstract mode, when the application boots it will be in a "nowhere" state until you explicitly tell the router where it is.
So I ended up using a custom render
function to ensure my app behaves as using history
or hash
router mode.
import { render } from '@testing-library/vue'
import VueRouter from 'vue-router'
import { routes } from '@/src/router'
import App from '@/src/App'
export async function renderApp () {
const router = new VueRouter({
mode: 'abstract',
routes,
})
const renderResult = render(App, {
routes: router,
})
await router.push('/')
return renderResult
}
Do you think it's worth mentioning in the FAQ section that abstract
mode comes with this pitfall?
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!
:tada: This issue has been resolved in version 6.6.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
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:
Expected behavior
All tests should pass.
Screenshots
Related information:
@testing-library/vue
version: HEAD at 7bef579Vue
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.