I know that there are already questions about this but I can't find a definite answer. I am using SvelteKit and I tried to mock $app/navigation likes this in setup file.

jest.mock('$app/navigation', () => {
    return {
        __esModule: true,
        goto: jest.fn().mockImplementation((target) => console.log(target))
    };
});

I test a ponent that call goto. It is indeed called because there is a console.log call in the test output. When I tried to test it with expect(goto).toHaveBeenCalled(), it fails.

    // SvelteKit
    import * as navigations from '$app/navigation';
    it('show error when account does not exists', async () => {
        // render is in before Each
        await fireEvent.change(screen.getByLabelText('Email'), {
            target: { value: '[email protected]' }
        });
        await fireEvent.change(screen.getByLabelText('Password'), {
            target: { value: 'B@adPass0rd' }
        });
        await fireEvent.click(screen.getByRole('button'));
        // There is no problem. It should redirect.
        expect(navigations.goto).toHaveBeenCalled();
    });

Output

 console.log
    /success

      at log (jest-setup.js:6:58)

 FAIL  src/lib/routes-tests/login.test.js
  Login
    ✕ show error when account does not exists (23 ms)

  ● Login › show error when account does not exists

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      24 |              await fireEvent.click(screen.getByRole('button'));
      25 |              // expect(screen.queryByText('Account does not exist')).not.toBeNull();
    > 26 |              expect(navigations.goto).toHaveBeenCalled();
         |                                       ^
      27 |      });
      28 | });
      29 |

      at toHaveBeenCalled (src/lib/routes-tests/login.test.js:26:28)
      at tryCatch (src/lib/routes-tests/login.test.js:23:2404)
      at Generator._invoke (src/lib/routes-tests/login.test.js:23:1964)
      at Generator.next (src/lib/routes-tests/login.test.js:23:3255)
      at asyncGeneratorStep (src/lib/routes-tests/login.test.js:25:103)
      at _next (src/lib/routes-tests/login.test.js:27:194)

I know that there are already questions about this but I can't find a definite answer. I am using SvelteKit and I tried to mock $app/navigation likes this in setup file.

jest.mock('$app/navigation', () => {
    return {
        __esModule: true,
        goto: jest.fn().mockImplementation((target) => console.log(target))
    };
});

I test a ponent that call goto. It is indeed called because there is a console.log call in the test output. When I tried to test it with expect(goto).toHaveBeenCalled(), it fails.

    // SvelteKit
    import * as navigations from '$app/navigation';
    it('show error when account does not exists', async () => {
        // render is in before Each
        await fireEvent.change(screen.getByLabelText('Email'), {
            target: { value: '[email protected]' }
        });
        await fireEvent.change(screen.getByLabelText('Password'), {
            target: { value: 'B@adPass0rd' }
        });
        await fireEvent.click(screen.getByRole('button'));
        // There is no problem. It should redirect.
        expect(navigations.goto).toHaveBeenCalled();
    });

Output

 console.log
    /success

      at log (jest-setup.js:6:58)

 FAIL  src/lib/routes-tests/login.test.js
  Login
    ✕ show error when account does not exists (23 ms)

  ● Login › show error when account does not exists

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      24 |              await fireEvent.click(screen.getByRole('button'));
      25 |              // expect(screen.queryByText('Account does not exist')).not.toBeNull();
    > 26 |              expect(navigations.goto).toHaveBeenCalled();
         |                                       ^
      27 |      });
      28 | });
      29 |

      at toHaveBeenCalled (src/lib/routes-tests/login.test.js:26:28)
      at tryCatch (src/lib/routes-tests/login.test.js:23:2404)
      at Generator._invoke (src/lib/routes-tests/login.test.js:23:1964)
      at Generator.next (src/lib/routes-tests/login.test.js:23:3255)
      at asyncGeneratorStep (src/lib/routes-tests/login.test.js:25:103)
      at _next (src/lib/routes-tests/login.test.js:27:194)

• javascript
• jestjs

• The mock and the test should be in the same file. Does that fix the problem? – Ovidijus Parsiunas Commented Jun 1, 2022 at 10:07
• @OvidijusParsiunas No, the problem is from another method. I called the function in async but did not call waitFor. – Pontakorn Paesaeng Commented Jun 2, 2022 at 7:58
• Could you share your jest config? I'm trying to use Jest with SvelteKit but I get "goto is not a function" error. – Yulian Commented Dec 30, 2022 at 13:12

1 Answer 1

It turns out that I called goto in async function. I must use waitFor to expect the change.

await waitFor(() => expect(navigations.goto).toHaveBeenCalled())