【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的套件。

下一篇，除了要说明如何在使用者模式移除属性外，要来开始建构我们小计数器的组件了!

希望到这边，小菜鸟讲的都还算浅显易懂..因为下一篇开始就是我们的重头戏啦~

我们要建立一个小计数器组件，然後来测试这个组件!