iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

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

【Day17】 data-test這個屬性是用來幹嘛的...? 這東西能吃嗎 (╯✧∇✧)╯ !?

其實在html裡,我們可以給予以data開頭的屬性,

data-test這個屬性只是方便我們來辨別它是測試用的屬性

  • 在html標籤上鑲入data-test屬性

    <div data-test="component-app" className="App">
    
    </div>
    
  • 透過wrapper來取得想要的節點

    const setup=()=>shallow(<App/>);
    const findByTestAttribute=(wrapper,value)=>wrapper.find(`[data-test='${value}']`);
    
    test('renders learn react link', () => {
      const wrapper= setup();
    
      const app=findByTestAttribute(wrapper,'component-app')
    
    });
    
    • 使用我們上一篇所建立的兩個共用function,套用在一個單元測試裡

    • 先透過setup function建立一個wrapper

    • 在透過findByTestAttribute function 尋找想要的節點 (這邊是找名稱叫做component-app的div區塊=>也就是APP這整個Component)

      這裡可以試試看跑一次npm-test,看結果是不是成功的

當然 我們在開發的時候看到data-test這個屬性是沒有問題的,

可是如果是在使用者模式看到的話,好像哪裡怪怪的...?
其實屬性是可以在使用者模式中拿掉的,但必須要安裝一個babel的套件。

下一篇,除了要說明如何在使用者模式移除屬性外,要來開始建構我們小計數器的組件了!

希望到這邊,小菜鳥講的都還算淺顯易懂..因為下一篇開始就是我們的重頭戲啦~

我們要建立一個小計數器組件,然後來測試這個組件!


上一篇
【Day16】單元測試不用每次都寫一樣的東西吧!? 把常用的function寫成共用的吧୧☉□☉୨!
下一篇
【Day18】在使用者模式移除data-test屬性,淺談React Hook (•‿•)
系列文
用Jest和Enzyme來寫React測試吧!!30

尚未有邦友留言

立即登入留言