mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 00:49:39 +08:00
1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
|
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["f8c06058"],{f8c06058:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("34a4f7df");let n=[{value:"Hello, I am ",paraId:0},{value:"@li-jia-nan",paraId:0},{value:". It is also a new Collaborator who joined antd in the past few months. Fortunately, as one of the Collaborators, I developed the ",paraId:0},{value:"FloatButton component",paraId:1},{value:" and ",paraId:0},{value:"QRCode component",paraId:2},{value:", as well as some other maintenance work. Let me share the migration of the antd test library son~",paraId:0},{value:"In ",paraId:3,tocIndex:0},{value:"antd@4.x",paraId:3,tocIndex:0},{value:", ",paraId:3,tocIndex:0},{value:"enzyme",paraId:3,tocIndex:0},{value:" is used as the test framework. However, due to the lack of maintenance of enzyme, it is difficult to support it in the React 18 era . Therefore, I had to start a long ",paraId:3,tocIndex:0},{value:"@testing-lib",paraId:3,tocIndex:0},{value:" migration road for antd.",paraId:3,tocIndex:0},{value:"During the migration process, I undertook about a quarter of the workload of antd. Here I mainly record the problems encountered during the migration process.",paraId:4,tocIndex:0},{value:"Thanks for the time ",paraId:5,tocIndex:0},{value:"@zombieJ",paraId:5,tocIndex:0},{value:" ",paraId:5,tocIndex:0},{value:"@MadCcc",paraId:5,tocIndex:0},{value:" ",paraId:5,tocIndex:0},{value:"@miracles1919",paraId:5,tocIndex:0},{value:" for help.",paraId:5,tocIndex:0},{value:"Before migrating, we need to figure out what the purpose of the migration is. In ",paraId:6,tocIndex:1},{value:"enzyme",paraId:6,tocIndex:1},{value:', most scenarios are to test whether the state in the component is correct, or whether the static properties on the class are assigned normally, which is actually unreasonable, because we need to care more about whether the "function" is normal , rather than whether the "attribute" is correct, because the source code is a black box for the user, and the user only cares about whether the component is correct.',paraId:6,tocIndex:1},{value:'Basically, test cases should be written based on "behavior", not "implementation" (this is also the goal of ',paraId:7,tocIndex:1},{value:"testing-library",paraId:7,tocIndex:1},{value:"). In principle, several use cases were found to be redundant (because some functions would not be triggered individually in real code), and their removal did not affect the test coverage.",paraId:7,tocIndex:1},{value:"Of course, this is only one of the reasons to drop ",paraId:8,tocIndex:1},{value:"enzyme",paraId:8,tocIndex:1},{value:". More importantly it is unmaintained and does not support React 18 anymore.",paraId:8,tocIndex:1},{value:"enzyme",paraId:9,tocIndex:3},{value:" supports rendering in three ways:",paraId:9,tocIndex:3},{value:"shallow: Shallow rendering, which is an encapsulation of the official Shallow Renderer. Render the component into a virtual DOM object. The component obtained through Shallow Render will not have a part asserted to the sub-component, and the information of the component can be accessed using jQuery.",paraId:10,tocIndex:3},{value:"render: Static rendering, which renders the React component into a static HTML string, then parses the string, and returns an instance object, which can be used to analyze the html structure of the component.",paraId:11,tocIndex:3},{value:"mount: Fully rendered, it loads component rendering into a real DOM node to test the interaction of DOM API and the life cycle of components, and uses jsdom to simulate the browser environment.",paraId:12,tocIndex:3},{value:"In order to be close to the real scene of the browser, ",paraId:13,tocIndex:3},{value:"antd@4.x",paraId:13,tocIndex:3},{value:" uses ",paraId:13,tocIndex:3},{value:"mount",paraId:13,tocIndex:3},{value:" for rendering, and the corresponding ",paraId:13,tocIndex:3},{value:"render",paraId:13,tocIndex:3},{value:" method in ",par
|