iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

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

【Day13】在Ezyme上裝上相對應版本的適配器(Adapter)吧´・ᴗ・`

  • 分享至 

  • xImage
  •  

前面我們有大概提到Enzyme的優點及作用~

這篇我們要直接來安裝Enzyme和導入Enzyme來供我們後續的測試作使用!

由於Enzyme 不會在建立專案的時候產生,所以必須另外安裝。

總共需要安裝三個packages

  • enzyme本身
  • jest-enzyme =>用來幫助enzyme和jest溝通的套件
  • enzyme-adapter-react => 在React上使用enzyme的適配器

首先! 先執行以下指令來安裝上述三個套件吧~

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

安裝完畢以後,開啟App.test.js,我們要試著導入Enzyme和適配器,
並建立一個適配器給Enzyme使用

  • import Enzyme 及 剛剛所安裝的非官方適配器

    import Enzyme from 'enzyme';
    import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';
    
  • 建立一個新的Enzyme適配器

    Enzyme.configure({adapter:new EnzymeAdapter()});
    

這一篇,稍微簡略一點點,只有安裝跟導入的部分,

其實對小菜鳥來說 Enzyme的定位就是 Test 裡面的 jquery的概念,

大概是 js <-> jquery

然後 Jest <-> Enzyme

下一篇我們要來用我們導入的東西來寫一個小小小測試。

一切到這邊都還算....容易理解吧!? 希望是這樣啦~(//●⁰౪⁰●)//


上一篇
【Day12】建立React專案並安裝Jest,來跑跑看第一個測試吧 -`д´-!
下一篇
【Day14】利用Ezyme來跑個小小測試,還有..測試權衡是蝦咪東東 (•ө•)!!?
系列文
用Jest和Enzyme來寫React測試吧!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言