Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 component 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: 'example@email.com' }
        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 | });
      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)
                @OvidijusParsiunas No, the problem is from another method. I called the function in async but did not call waitFor.
– Pontakorn Paesaeng
                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
                Dec 30, 2022 at 13:12
It turns out that I called goto in async function. I must use waitFor to expect the change.
await waitFor(() => expect(navigations.goto).toHaveBeenCalled())
                This saved my day! Didn't realize the main function "execute" used an await op1() inside it so my spy of the mocked op1 function passed just fine by the next line, expect(spyOp2) that happens after op1 was awaited was saying "received function calls: 0". Just adding an await in front of execute did the trick.
– Cody
                Nov 8, 2022 at 21:48
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.