Since the enzyme can make us get easier to update to new version of React and make our test code more lean and maintainable
You"d better not use props() to get props from component, because Enzyme document said that only the root component can get props by the function. We can use chai-moment to do the assertion
Please use methods in require("test/unit/helpers/renderHelpers") to render component, do not use enzyme directly, this gives us the flexibility to handle the memory issue.
Currently the renderHelper.js is only on the spike branch. And will make a pr soon.
You can also checkout this spike branch to see how we change the existing tests to enzyme.
UI componentconst {mount} = require("test/unit/helpers/renderHelpers") const wrapper = mount();
You can specify the DOM node you want to mount on by provide the second argument:
const container = document.createElement("div"); const wrapper = mount(, { attachTo: container });
enzyme also provide shallow render, but I suggest to use mount for keeping things consistant.
Page or component with route dependencyconst {mountWithRouteContext} = require("test/unit/helpers/renderHelpers") const wrapper = mount(Wrapper methods of enzyme);
When you call the render method we metioned before, instead of return a ReactComponent, now we returns a wrapper provide by enzyme.
Here I would like to introduce some most useful methods. And please check the document for more information.
the powerful find method can find a node with powerful Enzyme Selector which support CSS selector and component constructor.
const wrapper = mount(ref); //by jQuery selector const fooWrapper = wrapper.find(".foo") //find also returns a wrapper, so it support chaining call const barWrapper = wrapper.find(".foo").find(".bar") //by Component type const iconWrapper = wrapper.find(Icon)
class Foo extends React.Component { render() { return (at/childAtFirst Second Third); } } const wrapper = mount(); expect(wrapper.ref("secondRef").prop("amount")).to.equal(4);
The wrapper in enzyme is just like jQuery object. so it might have multiple components inside, the at and childAt can find a node in the current wrapper by index passed in
Note : the index is zero-based
const wrapper = mount(
You can get the ReactComponent instance, but it"s only available for the wrapper of root node (the node passed into mount())
wrapper.state() in enzyme is only available for root component
It"s useful when you want to stub a method like transitionTo
buttonLink.instance().transitionTo = spy(); //This is unvaliable! .instance is only for the root node buttonLink.find("span").instance()simulate
To simulate events:
const wrapper = mount() wrapper.simulate("click")Assertion
suggest to use chai and chai-enzyme to do the assertion instead of should.js, we"ve created some customized assert method like containText work with should.js before, but I think chai-enzyme cover more scenarioes.
highly suggest you to check the document of chai-enzyme when you don"t know how to do the assertion, and below are the most common cases we will meet
A node is shownconst wrapper = mount(Have or contain some text); expect(wrapper.find("span")).to.be.present(); expect(wrapper.find("span")).to.exist; //exist is an alias expect(wrapper.find("ul")).to.not.be.present(); expect(wrapper.find("ul")).to.not.exist;
const wrapper = mount(Have some prop or classNameTest) expect(wrapper.find("#child")).to.have.text("Test") expect(wrapper.find("#child")).to.contain.text("Te") expect(wrapper.find("#child")).to.not.have.text("Other text")
const wrapper = mount() expect(wrapper.find(User).first()).to.have.prop("index") expect(wrapper.find(User).first()).to.not.have.prop("invalid") expect(wrapper.find(User).first()).to.have.prop("index", 1) expect(wrapper.find(User).first()).to.not.have.prop("index", 2) expect(wrapper.find(User).first()).to.have.prop("index").equal(1) expect(wrapper.find(User).first()).to.have.prop("user").deep.equal({name: "Jane"}) And if you want to check the className, here is a better way: const wrapper = mount(
test) expect(wrapper.find("span")).to.have.className("child") expect(wrapper.find("span")).to.not.have.className("root") to.be.true; to.be.null; to.have.lengthOf(2); to.have.deep.property(‘response.title’, ’sdfdgd")
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92609.html
摘要:簡介是發布的一個開源的基于框架的單元測試工具。具體版本對照如下版本版本此處使用的版本為,所以我們需要安裝依賴安裝完成,接下來需要進行相關的配置。這樣就可以將測試集中在組件的結構和邏輯上。 Jest、Enzyme 簡介 Jest 是 Facebook 發布的一個開源的、基于 Jasmine 框架的 JavaScript 單元測試工具。 Enzyme 是 React 的測試類庫。 Enzy...
摘要:昨天我們使用了庫來編寫我們對組件的第一個測試。是由團隊發布和維護的測試實用程序庫它提供了一個更好的高級的來處理測試中的組件。我們將使用導出的函數來裝載我們的組件。相反我們必須使用提供的方法。 本文轉載自:眾成翻譯譯者:iOSDevLog鏈接:http://www.zcfy.cc/article/3806原文:https://www.fullstackreact.com/30-days-...
摘要:但是,從長遠來看,尤其是多人協作的項目,還是很有必要的。第二參數為了某些場景下要大寫強調,只需要傳入即可自動將結果轉成大寫。這個有可能是業務上線了之后才發生,直接導致業務不可用。而這也被證明是個好的編碼方式。 只是抱著嘗試的心態對項目進行了遷移,體驗了一番typeScript的強大,當然,習慣了JavaScript的靈活,弱類型,剛用上typeScript時會很不適應,猶如懶散慣了的人...
摘要:前端開發需要了解的工具集合前端開發需要了解的一些工具,這些工具能夠幫助你在項目開發中事半功倍。總之,是前端打包的不二選擇。所以,很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。 前端開發需要了解的工具集合:webpack, eslint, prettier, ... 前端開發需要了解的一些工具,這些工具能夠幫助你在項目開發中事半功倍。 1. nrm: npm...
閱讀 917·2021-11-24 09:38
閱讀 925·2021-11-23 09:51
閱讀 2939·2021-11-16 11:44
閱讀 1762·2021-09-22 15:52
閱讀 1626·2021-09-10 11:20
閱讀 1361·2019-08-30 13:47
閱讀 1292·2019-08-29 12:36
閱讀 3293·2019-08-26 10:43