How can I test async running code with vitest and use beforeEach and afterEach to setup and teardown resources?

[nsulzberger]

We have a lot of async running code in our repo we would like to test.
Our test suite looks like this:

describe('suite', () => {
 beforeEach(() => { // set up resources for test x  });
 afterEach(() => { // tear down resources for test x  });
  it('test 1', async ({ expect }) => { /* ... */ })
  it('test 2', async ({ expect }) => { /* ... */ })
})

What I have learned is that our async called tests are not running serially as far as I can see. Test1 is starting first, and immediately test2 is starting afterwards while test 1 is still running. So afterEach() running after test1 is tearing down resources which should be available in test2, so test2 is failing.

Is this behavior expected, or are we doing something wrong in our code in test1 and test2. As both tests are using the same iframe, and so the components sometimes gets added twice to the iframe, they break.

[AriPerkkio]

Is this behavior expected

Yes. Use beforeAll and afterAll to make sure setups don't run before each test.

our async called tests are not running serially as far as I can see. Test1 is starting first, and immediately test2 is starting afterwards.

This sounds serial to me. Use it.concurrent to run test cases inside same test file concurrently.

[nsulzberger]

sorry my description was not good enough. test2 is starting while test1 is still running.

[AriPerkkio]

It shouldn't. Could you demonstrate this with https://vitest.new?

[nsulzberger]

Hi @AriPerkkio no I can't. We are using chai for assertions, and using our own test extensions as added here, but I cannot repro.
https://stackblitz.com/edit/vitest-dev-vitest-v438gker?file=test%2Fsuite.test.ts&initialPath=__vitest__/
I need to find out whats wrong in our environment. We have a lot of uncaught exceptions ocurring, maybe they lead to the behavior.