Error: [vue-test-utils]: enableAutoDestroy cannot be called more than once

[mariadb-ThienLy]

enableAutoDestroy doesn't work as expected

Basically I have many ***spec.js files. There are two files that I call this helper, it prompts error immediately after I run the all tests.

Steps to reproduce

Create two dummy unit tests files. e.g. Hello.spec.js and Dummy.spec.js and calls
enableAutoDestroy(afterEach)

Expected behaviour

Should work normal as using wrapper.destroy() in afterEach hooks

Actual behaviour

Error: [vue-test-utils]: enableAutoDestroy cannot be called more than once

[lmiller1990]

Hi! Thanks for the issue. Which test runner are you using? I wonder if this is test-runner specific.

Are you interested in investigating making a PR by any chance?

[xanf]

@mariadb-ThienLy I believe this is intended behavior - you can register enableAutoDestroy only once and should do it in global setup. But I see use cases when we may benefit from suite level auto-destroy - for example in GitLab some suites are using one wrapper per test, but some do not.

@lmiller1990 WDYT of making enableAutoDestroy to return "unsubscribe" function - so we can safely install and uninstall this logic per-file

[lmiller1990]

I am not sure if this intended or not 🤔 I almost forgot about this feature.

@xanf That sounds a better way of doing this @xanf - and this would be purely additive, no breaking change, I believe?

[xanf]

@lmiller1990 exactly, I'll make a PR

[winniehell]

author of #1245 here 👋

I am not sure if this intended or not 🤔

Yes, to some degree it was intended because you don't run into the issue in an isolated test environment such as Jest. Resetting the hook callback is a bit complicated. No test framework I know of allows to disable callbacks you once passed to afterEach.

We could replace this

vue-test-utils/packages/test-utils/src/auto-destroy.js

Lines 21 to 30 in 6e3e4e5

	hook(() => {
	wrapperInstances.forEach((wrapper: Wrapper) => {
	// skip child wrappers created by wrapper.find()
	if (wrapper.selector) return
	wrapper.destroy()
	})
	wrapperInstances.length = 0
	})

with

const callback = () = {
  // ...
}

hook(() => callback());

const disable = () => {
  callback = () => {};
  isEnabled = false;
};

return disable;

but it's not extremely beautiful as (the empty) callback will still be called for every test run.

[xanf]

I believe this one could be closed - there is resetAutoDestroyState method which is now exposed in docs in more obvious way via #1674

[winniehell]

@xanf Calling resetAutoDestroyState does not allow to call enableAutoDestroy more than once though (which is what this issue was about).

[xanf]

@winniehell correct me if I'm wrong https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/src/auto-destroy.js#L10 will allow me to reinstall enableAutoDestroy in other file

[winniehell]

@xanf yes, more precisely: It can be called more than once but the behavior would be surprising. For example

enableAutoDestroy(afterEach);

resetAutoDestroyState();

enableAutoDestroy(afterAll);

would destroy the wrappers in afterEach.