testing

Yeoman 是一個非常酷的工具，是許多值得尊敬的開發人員共同努力的結晶，旨在簡化網絡應用項目的設置和管理。 警告：此文章為舊文，可能不符合最新技術狀態。 Yeoman 是一個很有意思的工具，它的最重要的幾個特點包括： 它建立在穩定的工具之上，提供了簡單易用的接口，方便快捷地使用它們，而不需要重複發明輪子。 它是一個用於最受歡迎框架的腳手架工具，支持 Bootstrap、Ember.js、Angular.js、Backbone.js 等等。 借助 Bower（一個類似 Jam、Volo、Ender 的前端包管理工具，但更好），它提供了快速安裝、卸載和更新幫助功能，支持常用庫，如 jQuery、Underscore.js、Modernizer、Mocha、Backbone，以及任何已經存在的 Bower 包。 它內置測試功能，使用 mocha 在命令行中執行 PhantomJS（無界面瀏覽器）實例，或者在瀏覽器中打開 test/index.html 頁面進行測試。 它提供了一個 Python HTTP 服務器，用於測試代碼。當 web 服務器運行時，它會監聽項目中文件的變化，在你打開的頁面依賴於已更改的文件時重新加載瀏覽器。因此，你在開始編寫前端代碼之前，甚至不需要準備後端。 構建 Yeoman 項目非常簡單。 首先，安裝它： $ curl -L get.yeoman.io | sh 然後進入一個空目錄，輸入以下命令： $ yeoman init 這樣，它會出現歡迎界面，以及一個列表選項，用於向項目添加內容。 你可以通過以下命令開始一個新的 Ember.js 項目： $ yeoman init ember 這將創建一個新的 Ember.js 應用程序，創建一組基本的模型、控制器和視圖/模板（以及它們的目錄），為所有依賴項添加腳本標籤（包括 jQuery、Handlebars），並根據 HTML5 boilerplate 項目 http://html5boilerplate.com/ 創建一個 index.html 文件。 你可以使用 Yeoman 來啟動項目、更新項目中的依賴、運行測試等等。 當項目準備好部署時，你可以利用 Yeoman 中內置的 Grunt https://github.com/cowboy/grunt，通過執行 “yeoman build” 命令，對項目進行語法檢查、編譯（用於生產）、連接和壓縮腳本和樣式，以及壓縮圖片等操作。

今天我有需要檢查一個物件是否為空的需求。 由於在JavaScript中，物件是透過參考來進行比較的，因此無法像下面這樣進行簡單的比較： const obj = {} if (obj === {}) { //no } 解決方法是將該物件傳遞給內建的 Object.keys() 方法，然後檢查該物件的建構函式是否為 Object： const obj = {} Object.keys(obj).length === 0 && obj.constructor === Object 重要的是要添加第二個檢查，以避免出現誤報。

我有很多網站都是在 Netlify 上託管的，其中一些使用了一項名為 Netlify Functions 的功能。 可能是因為他們提供了極佳的靜態託管服務，所以我最喜歡的功能是 Netlify Functions。 您只需添加一個帶有導出函數的 JavaScript 檔案，用於處理 URL 的請求，然後完成設置。 您幾乎可以做任何事情，我將它們用作小型實用工具，用於可視化我所需的內部數據，或者執行“連接點”的操作，即將我運營業務所使用的不同工具「黏合」在一起。 如果您想了解更多資訊，請查看我的 Netlify Functions 教程。 在這篇文章中，我想特別談談如何在本地測試 Netlify functions。 有天我需要進行更改一個正在運行中的 Netlify Function，該函數用於處理註冊我的 Bootcamp 的人員，但我不想干擾正在進行的運營業務，以免給客戶造成問題。 我之前已經在「實時」環境中測試過這個函數，確保一切運行正常，但現在我有了不同的需求。 以下是我的解決方法： 首先，安裝 Netlify CLI npm install -g netlify-cli 然後，在網站文件夾中執行以下命令： netlify functions:serve 這樣就可以在本地提供服務的無服務器功能，使用的端口是 9999。您只需要使用類似以下的 URL 來訪問它們： http://localhost:9999/.netlify/functions/<name> 通過使用 Insomnia 發送虛擬 POST 請求，您可以測試它們。 這種方式測試函數還會抓取您在 Netlify 控制台中設定的任何 Netlify 環境變數，所以它就像在 Netlify 上運行它一樣。

如果您想開發自己的npm套件，首先必須在本地測試它。 我在一個我希望模組化的專案中遇到了這個需求。 我建了一個名為flaviocopes-common-database的套件作為示例。 我在套件中添加了一個package.json檔案，該檔案包含了模組名稱在name屬性中，以及一些依賴項: { "name": "flaviocopes-common-database", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "pg": "^8.0.2", "sequelize": "^5.21.6" } } 然後我執行了 npm link 這會在系統的/usr/local/lib/node_modules/資料夾中創建一個符號連結，該資料夾包含全域安裝的npm套件，即使用npm -g安裝的套件。 我有以下連結 /usr/local/lib/node\_modules/flaviocopes-common-database 指向我本地的檔案 /Users/flavio/dev/code/flaviocopes-common-database 現在在另一個專案中，我想使用這個模組，所以我執行了 npm link flaviocopes-common-database 然後我可以使用常見的require()語法在Node.js代碼中引入它: const database = require('flaviocopes-common-database')

使用 Jest 和 react-testing-library 測試你的第一個 React 元件 開始測試 React 元件最簡單的方法是使用快照測試。快照測試是一種讓你在獨立環境中測試元件的技術。 如果你對軟體測試很熟悉，這就像你為類別進行單元測試一樣：你測試每個元件的功能。 我假設你已經使用 create-react-app 創建了一個 React 應用，這個應用已經預先安裝了我們需要的測試套件 Jest。 讓我們從一個簡單的測試開始。CodeSandbox 是一個很好的環境來嘗試這個。在 CodeSandbox 中創建一個 React sandbox，並在 components 文件夾中創建一個 App.js 元件，然後添加一個 App.test.js 文件。 import React from 'react' export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ) } 我們的第一個測試很簡單： test('First test', () => { expect(true).toBeTruthy() }) 當 CodeSandbox 檢測到測試文件時，它會自動執行這些測試，你可以點擊視圖底部的 “Tests” 按鈕來查看測試結果： 一個測試文件可以包含多個測試： 現在讓我們做一些更有用的事情，實際上測試一個 React 元件。我們現在只有一個沒有實際用途的 App 元件，所以讓我們先設置一個具有更多功能的小應用程式環境：我們之前構建的計數器應用程式。如果你跳過了這部分，你可以返回並閱讀我們是如何構建它的，但為了方便參考，我在這裡再次添加一遍。...