【Day24】来到了测试的总整理啦 ヽ(‘ ∇‘ )ノ

来到测试的尾声，来把前面所学的整理一下吧!

• First Step => 要进行测试，我们势必要有东西给它测试，而且也要有可以进行测试的套件

  • 利用以下指令来建立专案

    npx create-react-app  专案名称
    

  • 执行以下指令来安装Jest

    npm install --save-dev jest
    

  • 再来执行以下指令来安装Enzyme (目前官方react版本17尚未支援Enzyme，但可以安装非官方版本的Enzmye来搭配版本17)

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

  • 安装其他刻划版面时会用到的套件 (bootstrap or fontawesome..等等)

• Second Step => 安装完所有我们所需的套件後，将渲染和取得元素写成共用的function以便每次单元测试使用

  • 透过Shallow渲染 : 参数放要渲染的Component

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

  • 取得DOM : wrapper传入的是被渲染的Component，value则是data-test属性的值

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

• Third Step => 透过共用function setup 渲染出Component後，利用共用function findByTestAttribute去寻找DOM，且透过Enzyme的API去针对DOM做测试 (ex: text(),isEmpty()等等)

  • Enzyme API 参考文件 : https://enzymejs.github.io/enzyme/docs/api/
  • 若要模拟事件触发则可以使用simulate api

• Last Step => 透过上述完成单元测试後进行存档，执行npm test 就可以看看测试是否成功罗 !

先前有提到写测试的目的是为了要测试APP应该要做什麽，而不是APP是怎麽运行的

这句话的意思是我们应该要去看APP做什麽事情出来的结果是不是正确的 (我们要先想好结果为何)

而不是去照着APP运行写测试。

重点

• 在写测试时发现有太多重复的code，需要整理成共用的function
• 从单元测试的名称最好就能浅显易懂知道这个单元测试在做什麽 (可以的话附上注解)

以上!! 统整完毕~ 下一篇要来补充React Class Component的生命周期 ，再来还会有Function Component的Hook生命周期、Redux补充、React Query补充、

小菜鸟本身踩到的小地雷补充...等等的

那我们就下一篇见啦~ （〜^∇^)〜