[TypeScript + Jest] 建立TypeScript的測試環境

3 min readSep 29, 2020

此篇用WebStrom

1. 建立npm環境

npm init -y

2. 安裝TypeScript、Jest、ts-jest

npm install --save-dev jest typescript ts-jest @types/jest

Jest其實透過Babel可以支援TypeScript，只是不包含型別檢查，所以此篇文章選擇使用ts-jest套件。而ts-jest套件需先安裝jest與TypeScript。

3. 新增`jest.config.js`讓Jest可以編譯TypeScript

npx ts-jest config:init

4. 新增測試的檔案

foo.ts

// foo.ts
export const foo = {
  a : {
    b: {
      c: {
        hello: (name: string) => `Hello, ${name}`,
      },
    },
  },
  name: () => 'foo',
}

foo.spec.ts

// foo.spec.ts
import { mocked } from 'ts-jest/utils'
import { foo } from './foo'
jest.mock('./foo')

// here the whole foo var is mocked deeply
const mockedFoo = mocked(foo, true)

test('deep', () => {
  // there will be no TS error here, and you'll have completion in modern IDEs
  mockedFoo.a.b.c.hello('me')
  // same here
  expect(mockedFoo.a.b.c.hello.mock.calls).toHaveLength(1)
})

test('direct', () => {
  foo.name()
  // here only foo.name is mocked (or its methods if it's an object)
  expect(mocked(foo.name).mock.calls).toHaveLength(1)
})