標題:使用 Typescript 和 Jest 進行單元測試

發表:真實

描述:

標籤: typescript、javascript、玩笑、單元測試


vscode-is

原文發佈於https://muhajirframe.com/writing/unit-test-typescript-jest/

在本文中,我們將嘗試介紹 Typescript + jest 中的簡單單元測試。

我們將建立一個簡單的實用程式來檢測 url 是內部連結還是外部連結。

例如https://www.google.com是外部連結,而/page1是內部連結。我們將專案命名為is-internal-link ,但您可以將其命名為任何名稱。

先決條件

  • NodeJS

  • VSCode + Jest 外掛程式(可選)

建立新目錄

mkdir is-internal-link

初始化 npm

npm init

安裝依賴項

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

建立jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

建立tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015"],
    "strict": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

好了,我們準備好要寫程式碼了。建立檔案src/main.tssrc/main.spec.ts

您的文件樹現在應該如下所示

.
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── main.spec.ts
│   └── main.ts
└── tsconfig.json

在您最喜歡的編輯器中打開它。 (VSCode / Atom / Sublime / 等)。

我個人使用VSCode

import { isInternalLink } from './main'

test('should return false given external link', () => {
  expect(isInternalLink('https://google.com')).toBe(false)
})

test('should return true given internal link', () => {
  expect(isInternalLink('/some-page')).toBe(true)
})

現在有辦法測試這一點。

方式一

打開你的package.json 。並將其替換為您的scripts

 "scripts": {
    "test": "jest"
  },

執行npm run test

現在您應該看到錯誤,因為我們還沒有實作程式碼,對嗎?

方式2

使用您的編輯器外掛程式。我比較喜歡這種方式。我只會在 VSCode 上展示它。您最喜歡的編輯器可能也有它。

安裝vscode - 是

vscode-is

這個 GIF 應該是一個很好的解釋 vscode-jest 是如何運作的

我們繼續吧。

vscode-is

您的 VSCode 現在可能如下所示。

實施程式碼

讓我們實作我們的main.ts

export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link)

切換回main.spec.ts 。現在您應該看到錯誤消失了,並且它變成了綠色。

專業提示:使用VSCode 分割編輯器同時檢視程式碼 ( main.ts ) 和規格 ( main.spec.ts )。

長話短說

在第一面開啟main.ts cmd+1 cmd+p main.ts

打開第二面的main.spec.ts cmd+2 cmd+p1 main.spec.ts

附註:我是 VSCode 和 Vim 的忠實粉絲,我有很多關於如何使用 VSCode 提高工作效率的技巧。如果你們有興趣的話請在評論中告訴我,我可以在這裡寫下來

恭喜!

您剛剛使用 Typescript 和 Jest 進行了單元測試


原文出處:https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln


共有 0 則留言