iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Modern Web

用Jest和Enzyme來寫React測試吧!!系列 第 16

【Day16】單元測試不用每次都寫一樣的東西吧!? 把常用的function寫成共用的吧୧☉□☉୨!

  • 分享至 

  • xImage
  •  

首先!! 我們先來建立渲染Component的function (這邊用的會是es6的箭頭函式)

const setup=()=>shallow(<App/>);

這樣一來我們就可以在每個單元測試裡面去呼叫這個function來建立我們的wrapper了


由於我們在寫測試的時候,基本上都會去找某個節點來作動作,
所以我們可以將找節點這個動作寫成共用的funtion

const findByTestAttribute=(wrapper,value)=>wrapper.find(`[data-test='${value}']`);

第一個參數傳入的是我們渲染出來的Component wrapper,
第二個參數是我們要找的節點data-test屬性的值
(後面會有單獨一篇說明這個data-test到底是什麼東西~)

找節點的function寫完後,就不用每次都要寫用find去找了,
只要把我們的Wrapper跟data-test屬性的值傳進去function就好了~

這邊是小菜鳥想到常用的function把它們寫成共用的,

下一篇我們會來說明這個data-test屬性是什麼,及我們要怎麼來設置這個屬性的值,

再來就是從我們渲染出來的Component上取得節點啦~


上一篇
【Day15】Enzyme的兩個常用渲染API及Jest的幾個API,和..設計測試的幾個要點 (・θ・)
下一篇
【Day17】 data-test這個屬性是用來幹嘛的...? 這東西能吃嗎 (╯✧∇✧)╯ !?
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言