Add docs for using mocks in TypeScript

[sheepsteak]

Related to #10399.

Summary

I thought it might be useful to add some documentation to go alongside the updated TypeScript examples in #10399. I find there is a general lack of knowledge when it comes to using writing tests with TypeScript and leveraging types for better tests.

Test plan

[SimenB]

Thanks for taking the time to write this! However, I don't think we need a completely new page for this - could you add it as a section to our mock docs?

https://jestjs.io/docs/en/mock-function-api

(also run prettier on the file 🙂)

[sheepsteak]

I've moved the TypeScript docs into the Mock Functions API page.

[orta]

These techniques are solid. 👍🏻

Other cases which I found in my current codebase, full module mocking:

jest.mock("./accounts")

import * as accounts from "./accounts"
const accountsMock = accounts as jest.Mocked<typeof accounts>

and maybe not worth the mention, but ts-jest also does includes some types:

jest.mock("../db/accounts", () => ({
  getKISSAccount: jest.fn(),
  updateAccount: jest.fn(),
}))


import { mocked } from "ts-jest/utils"

mocked(getKISSAccount).mockImplementation(async id => {
    expect(id).toEqual("ace-frehley-account-id")
    return account
})

Which @alloy seems to prefer

[alloy]

Yeah I used to do the same as this PR and @orta suggest, but I recently found this ts-jest util and quite like it. It also allows you to deeply mock the types.

https://github.com/kulshekhar/ts-jest/blob/master/docs/user/test-helpers.md

[sheepsteak]

Other cases which I found in my current codebase, full module mocking:

jest.mock("./accounts")

import * as accounts from "./accounts"
const accountsMock = accounts as jest.Mocked<typeof accounts>

I've had mixed success with this one, but, yes we should get that added in too. It was probably my bad types making it fail 😄

Yeah I used to do the same as this PR and @orta suggest, but I recently found this ts-jest util and quite like it. It also allows you to deeply mock the types.

https://github.com/kulshekhar/ts-jest/blob/master/docs/user/test-helpers.md

That looks cool. I'm definitely going to check that out. Thanks!

[SimenB]

Thanks, this is great!

Could you backport the changes the the versioned docs? Helpers from v24 won't make sense for for the older docs etc, but in general all the versions should be as similar as possible 🙂

[sheepsteak]

OK, I think I've updated the versioned docs properly. I did check the different versions and all seemed good 😅

[SimenB]

This is wonderful, thank you so much!

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.