其實在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的套件。

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

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

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