Due to the rapid development of the business, AntD 4.0.2(released a year ago) used in the current project can no longer meet the daily development needs, so the project team recently decided to upgrade to a relatively new version, because AntD has been constantly updated and added many new features in the past year. It is my pleasure to be in charge of this work.

Before the upgrade

First of all, check AntD’s official website. AntD mentioned in the update log that it adopts Semantic Versioning 2.0.0 version specification, which simply means that the version number is divided into three parts

  • The first is the major version number. If you want to upgrade the major version number, you need to upgrade other dependencies (such as React). You need to modify a lot of syntax, learn new features brought by the new version, and modify existing projects

  • The second is the minor release number. Generally speaking, the minor release number is easier to upgrade, because the minor release is backward compatible, that is, the theory can still support the project after the minor release, of course, there may be accidents

  • The third digit is the revision number, which is generally used to fix bugs. The revision number is relatively frequent and cheapest to update

The ~4.0.2 in package.json means that the version 4.0.x can be matched, which means that the revision number can be upgraded.

^4.0.2 means that the 4.x. y version can be matched, which means that the next version number can be upgraded.

Since AntD says that 4.13.0 is compatible with 4.0.2, it is theoretically possible to upgrade unscrupulously, however, to be on the safe side, I first made a local copy of the engineering code, Then I tried to upgrade AntD to 4.13.0(package.json changed to 4.13.0 and then NPM install), but I encountered an error

Compile error – Can’t resolve @babel/runtime/helpers/esm/createSuper

Then according to the AntD issue on Github (github.com/ant-design/…

After the upgrade

The technical requirements are somewhat more important than the business requirements, because the business code is self-written and more controllable than the dependency library, so sufficient testing is required after the upgrade to ensure that the dependency upgrade does not introduce bugs.

  1. Analyze AntD’s update log for changes that might affect it. In general, bug fixes and new feature releases do not affect old code, so the focus is on existing feature changes and optimizations, with a few feature reductions.
  2. Analyze the dependence on AntD in the project. Our components are divided into basic components and business components. Both components have AntD references, but the faults of business components are easier to be found. Business components, on the other hand, need to be tested more thoroughly, and the key component in our project is the Form
  3. Sort out the relatively complex functions in the project. Theoretically, as long as the complex functions can run normally, the upgrade will not introduce problems.

To sum up, the final test scope assigned to the test team was one of the most complex functions in the project, including the components that we heavily encapsulated the Form. Then some very common list page, details page by me to self-test, self-test is mainly compared with the UAT environment, confirm that the existing functions and pages are not affected