如何在解决承诺之前正确地让 jest axios 模拟等待

Question

I have a function like this:

join(): void {
    this.working.value = true;
    if (this.info.value) {
      axios.get('/url')
        .then((result: ResultStatus) => {
          this.result = result;
        })
        .catch((reason: AxiosError) => {
          this.showError(AjaxParseError(reason));
        })
        .finally(() => {
          this.working.value = false;
        });
    }
  }

and I want to write some unit tests for this. The first unit test I want to write is to test that 'this.saving' is set to true so that I ensure my UI has a value it can use to show a loading indicator.

However, when I use jest to mock axios, jest resolves the axios promise immediately and I don't have a chance to test what happens before the then/finally block is called. Here is what my unit test code looks like:

import axios from 'axios';
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

import successResponse from './__json__/LeagueJoinInfoSuccess.json';

describe('constructor:', () => {
    let vm: classUnderTest;
    beforeEach(() => {
      vm = new classUnderTest();
      mockedAxios.get.mockResolvedValue({ data: successResponse }); // set up the response
      vm.join(); // the function under test
    });
    it('should set working true before calling the server to join', () => {
      expect(vm.working.value).toBeTruthy();
    });
    it('should set working false after calling the server responds', async () => {
      await flushPromises();
      expect(vm.working.value).toBeFalsy();
    });
});

The first expect statement is always false because the finally block is run before I have a chance to do an await flushPromises(); so the working value is always false.

Is there a convenient way to get jest's mock of axios to wait before resolving its promise?

UPDATE: Now here is a really strange thing: If I move the contents of BeforeEach into each of the tests, then it behaves the way that I am hoping it would behave. I guess I will open an issue over at jest and ask them what's going on.

Answer 1

I have a solution for you to create a promise as response, however, we're not gonna resolve it in the 1st test case to keep you test loading state then resolve it in the 2nd test as following:

describe('constructor:', () => {

  let vm: classUnderTest;

  // Resolve function
  let resolveFn: (value?: unknown) => void

  beforeEach(() => {
    vm = new classUnderTest();

    const promise = new Promise(resolve => {
      // hold the resolve function to call in 2nd test
      resolveFn = resolve;
    });
    mockedAxios.get.mockImplementation(() => promise);

    vm.join(); // the function under test
  });

  it('should set working true before calling the server to join', () => {
    expect(vm.working.value).toBeTruthy();
  });

  it('should set working false after calling the server responds', async () => {
    // resolve the pending promise
    resolve({
      data: successResponse,
    });

    // I think you would wait the promise resolved
    await new Promise(resolve => setTimeout(resolve));

    expect(vm.working.value).toBeFalsy();
  });
});