Sharing Variables in Nested Describes

[tallpaul-embark]

Has anyone found a good way to nest describe blocks in a given, when, then pattern with the ability to share values across describe blocks? I have had no issue doing this in jest. I am now getting this error ReferenceError: mockJwtPayload is not defined upon switching to vitetest.

import * as authentication from 'services/auth';
import { describe, expect, it, vi } from 'vitest';

describe('urqlAuth', () => {
  describe('Given on page load that a user is authenticated', () => {
    const mockJwtPayload = { sub: 'userUuid', exp: 1715049540 };
    const mockToken = 'mockToken';
    vi.mock('services/authentication/authentication', () => ({
      validateToken: () => Promise.resolve(mockJwtPayload),
      fetchToken: () => Promise.resolve(mockToken),
    }));

    describe('When the user tries to request data from the pet mesh', () => {
      it('Then the user should be able to see the data', async () => {
        const validatedToken = await authentication.validateToken('anyToken');
        const fetchedToken = await authentication.fetchToken();

        expect(validatedToken).toEqual(mockJwtPayload);
        expect(fetchedToken).toEqual(mockToken);
      });
    });
  });
});

[hi-ogawa]

Since vi.mock is always moved to top before import, the code is transformed to like this:

vi.mock('services/authentication/authentication', () => ({
  validateToken: () => Promise.resolve(mockJwtPayload),  /// <--- `mockJwtPayload` is undefined
  fetchToken: () => Promise.resolve(mockToken),
}));

describe('urqlAuth', () => {
  describe('Given on page load that a user is authenticated', () => {
    const mockJwtPayload = { sub: 'userUuid', exp: 1715049540 };  // <-- `mockJwtPayload` is still here

I suppose you have some reason you want to define mockJwtPayload inside describe, so can you provide complete code to explain why? Depends on the use case, it might be possible to suggest workaround.

[tallpaul-embark]

That makes sense. I tend to have several different cases I might test. I think a simple example of this is given a user has a jwt token do this set of scenarios. Then try to test a different set of expiernces with another set of describes that change how the mocks work for when no jwt is set.

[sheremet-va]

Jest hoists jest.mock to the top of the scope unlike Vitest that hoists it to the top of the file. In your case, I don't see how this would even work in Jest unless you require/import authentication in the test itself.

Hoisting is required because mocks should be registered before the files are imported, not after. You can use vi.doMock if you need to avoid hoisting, but then you need to import the file again.

You can also use vi.hoisted to define variables before the mocking function, - that way you can pass them down to vi.mock, but it should be done at the top level.

See more in docs: https://vitest.dev/api/vi.html#vi-mock

[tallpaul-embark]

These were originally written in jest where the mock was created at the top of the file but setting the mocked return value was set in a different scope.

[tallpaul-embark]

Thanks @sheremet-va and @hi-ogawa for your answers. I think what I needed to wrap my head around was the spying was not just for looking an incoming values or if a function was called, but also for mocking values.

I know this is not a great set of tests. I just was playing with how can I get different mocked values back from

import * as authentication from 'services/auth';
import { describe, expect, it, vi, beforeEach } from 'vitest';

describe('urqlAuth', () => {
  describe('Given on page load that a user is authenticated', () => {
    const mockJwtPayload = { sub: 'userUuid', exp: 1715049540 };
    const mockToken = 'mockToken';

    beforeEach(() => {
      vi.spyOn(authentication, 'validateToken').mockImplementation(() => Promise.resolve(mockJwtPayload));
      vi.spyOn(authentication, 'fetchToken').mockImplementation(() => Promise.resolve(mockToken));
    });

    afterEach(() => {
      vi.restoreAllMocks();
    });

    describe('When the user tries to request data from the pet mesh', () => {
      it('Then the user should be able to see the data', async () => {
        const validatedToken = await authentication.validateToken('anyToken');
        const fetchedToken = await authentication.fetchToken();

        expect(validatedToken).toEqual(mockJwtPayload);
        expect(fetchedToken).toEqual(mockToken);
      });
    });
  });

  describe('Given on page load that a user is unauthenticated', () => {
    beforeEach(() => {
      vi.spyOn(authentication, 'validateToken').mockImplementation(() => Promise.reject(new Error('Invalid token')));
      vi.spyOn(authentication, 'fetchToken').mockImplementation(() => Promise.reject(new Error('Invalid token')));
    });

    afterEach(() => {
      vi.restoreAllMocks();
    });

    describe('When the user tries to request data from the pet mesh', () => {
      it('Then the user should not be able to see the data', async () => {
        await expect(authentication.validateToken('invalidToken')).rejects.toThrow('Invalid token');
        await expect(authentication.fetchToken()).rejects.toThrow('Invalid token');
      });
    });
  });
});

[sheremet-va]

You can also make it a bit shorter by using mockResolvedValue:

- vi.spyOn(authentication, 'validateToken').mockImplementation(() => Promise.resolve(mockJwtPayload));
+ vi.spyOn(authentication, 'validateToken').mockResolvedValue(mockJwtPayload)