標題：使用 Typescript 和 Jest 進行單元測試
發表：真實
描述：
標籤： typescript、javascript、玩笑、單元測試
原文發佈於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.ts和src/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 上展示它。您最喜歡的編輯器可能也有它。
這個 GIF 應該是一個很好的解釋 vscode-jest 是如何運作的
我們繼續吧。
您的 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
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式