如何使用開玩笑測試反應組件

>本文使用JEST（一個Facebook維護的測試框架）探討了測試React組件和簡單的JavaScript功能。 我們將從簡單的JavaScript函數開始，然後再轉移到特定於反應的功能。 開玩笑不僅僅是反應。對於任何JavaScript應用程序，它都足夠多。但是，它的功能對於UI測試特別有用，使其非常適合React。

密鑰點：

使用玩笑測試React組件和JavaScript函數。
• 開始，從簡單的JavaScript函數開始學習開玩笑的基礎知識。
安裝開玩笑和babel以兼容。
使用開玩笑的手錶模式進行有效的測試重新啟動。
對於反應組件，考慮酶或反應測試庫。 >
• 使用開玩笑的嘲笑，間諜和並行測試。 >
• 示例todo應用程序：
• >
>一個小型TODO應用程序（可在GitHub和Live Demo上找到）作為我們的測試主題。 它是使用ES2015，Webpack和Babel構建的。核心邏輯屬於

>，其中包含管理應用程序狀態的純函數（

，，）。 這些功能類似於redux還原器。

>

app/state-functions.js測試驅動的開發（TDD）：>> toggleDone> TDD（代碼之前的寫作測試）具有優勢，而該方法通常是個人喜好的問題。 對於React組件，首先編寫組件，然後添加測試通常是實用的。 addTododeleteTodo介紹開玩笑：

與其他框架相比，Facebook大大改善的開玩笑提供了簡化的設置。其並行的測試執行和觀察模式可顯著提高測試速度和效率。 它包括用於node.js中的類似瀏覽器測試的JSDON，並支持異步測試，模擬，間諜和存根。

>安裝和配置：

安裝必要的軟件包：

>確保存在a文件（原始文章中提供的示例）。 Jest期望在

>目錄中進行測試（或以

>或

結尾的文件）。

> 測試業務邏輯：

的簡單測試演示了開玩笑的用法：>

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

>babel.config.js用於對象/數組比較，而__tests__則用於原始類型。 Jest's Watch Mode（.test.js或.spec.js）會自動重新運行文件更改。 原始文章也顯示了類似的

>測試。

> 測試反應組件：

測試反應組件通常涉及比業務邏輯更少的全面測試。 酶（或React Teast庫，根據React團隊的建議）簡化了此過程。安裝酶和適當的適配器：

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

創建setup-tests.js配置酶：

import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});

在package.json中配置開玩笑> setup-tests.js：

>

npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17

顯示了Todo組件渲染的測試，使用mount渲染和find來定位元素。 隨後的測試使用jest.fn()來創建間諜函數，並simulate('click')觸發事件，用toBeCalledWith>。

驗證函數調用

結論：

開玩笑的速度，觀察模式和表達API使其成為一個強大的測試框架。 本文總結了其收益和進一步閱讀建議的摘要，以及解決有關測試與開玩笑的反應組件的常見問題的常見問題。 FAQ覆蓋

，React測試渲染器，用Props測試組件以及組件中的測試功能。

以上是如何使用開玩笑測試反應組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！