CN117724988A - 一种基于Testing Library的UI组件库测试方法、存储介质及电子设备 - Google Patents

Abstract

本申请涉及前端代码测试技术领域，解决了现有技术中UI组件库的测试难度大且效率低下的问题，公开了一种基于Testing Library的UI组件库测试方法、存储介质及电子设备，该方法包括：对待测UI组件库进行全局配置；对所述待测UI组件库中组件关键DOM节点的查询方法和用户事件交互方法进行抽离并编写对应的测试用例；根据所述测试用例生成JSDoc文档；将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，该方法能够减少重复性代码，开发者无需再去翻阅源码即可查看元素如何查询与用户事件如何触发，并且，能够自动提示测试工具库每个方法的使用方式及基本测试代码，以降低测试难度并提高测试效率。

Description

一种基于Testing Library的UI组件库测试方法、存储介质及 电子设备

技术领域

本申请涉及前端代码测试技术领域，尤其是一种基于Testing Library的UI组件库测试方法、存储介质及电子设备。

背景技术

在前端领域组件化开发模式盛行的背景下，许多开发者会基于Element-UI、ant-design等UI组件库进行组件化开发，在组件化开发过程中会基于这些UI组件库封装或者二次开发出自己的组件，而对这些组件使用单元测试进行质量保障尤为重要。在进行单元测试用例编写时，我们通常会使用Testing Library去处理用户交互行为，如按钮的点击事件等。当使用Testing Library对原UI组件库中的组件进行用户交互时，首先需要知道如何查询到这个元素，其次，还需要知道源码中该组件是如何定义交互事件逻辑的。为了测试一个自定义组件，还需要去翻阅查阅大量的源代码，测试用例的编写也因此变的繁琐，从而导致UI组件库的测试难度大且效率低下。

发明内容

本申请的目的在于克服现有技术中UI组件库的测试难度大且效率低下的问题，提供一种基于Testing Library的UI组件库测试方法、存储介质及电子设备。

第一方面，提供了一种基于Testing Library的UI组件库测试方法，包括：

对待测UI组件库进行全局配置；

对所述待测UI组件库中组件关键DOM节点的查询方法进行抽离；

对所述待测UI组件库中组件的用户事件交互方法进行抽离；

根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例；

在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档；

将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试。

进一步的，所述全局配置包括：组件库的统一样式前缀、组件库的图标样式前缀和组件库的弹出层默认渲染父节点。

进一步的，对所述待测UI组件库中组件关键DOM节点的查询方法进行抽离，包括：对所述待测UI组件库中组件关键DOM节点的查询方法进行封装并导出，其中，所述待测UI组件库中组件关键DOM节点的查询方法包括以下查询方法中的至少一种：组件根容器DOM节点的查询方法、组件各个交互DOM节点的查询方法和组件中指定某个子元素DOM节点的查询方法。

进一步的，对所述待测UI组件库中组件的用户事件交互方法进行抽离，包括：使用Testing Library对每个组件的用户事件交互方法进行封装并导出。

进一步的，根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例，包括：

引入Jest或者Mocha等JavaScript的测试框架，搭建测试环境；

为每一个查询方法与用户事件交互方法编写至少一个测试用例，对所述测试用例添加JSDoc注释，并通过JSDoc中的@link变量来标识所述测试用例所测试的方法的名称，其中，测试的方法为查询方法或用户事件交互方法。

进一步的，在测试用例编写完成后，保存所述测试用例的代码与所述测试用例所测试方法之间的映射关系，具体包括以下步骤：

通过ts-morph遍历源码中的单元测试代码，以得到每个单元测试用例的代码；

根据JSDoc中的@link标识来获取对应的单元测试块所测试的查询方法或用户事件交互方法的名称；

对查询方法或用户事件交互方法的名称与对应的单元测试代码的映射关系进行保存。

进一步的，在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档，包括：

使用tsc将测试用例的代码编译成CommonJS代码和d.ts类型文件；

使用ts-morph遍历编译后的代码，读取每个组件的d.ts类型文件，解析成AST抽象语法树；

遍历访问AST抽象语法树，获取类型文件中的查询方法和用户事件交互方法的类型定义；

根据所述类型定义中的查询方法或用户事件交互方法的名称从保存的查询方法或用户事件交互方法的名称与单元测试代码映射关系中找到对应的单元测试代码；

使用ts-morph对AST抽象语法树进行操作以将单元测试代码追加到对应的方法的JSDoc注释中的@example变量中，以完成JSDoc文档的自动生成；

将编译后的代码打包为测试工具包。

进一步的，将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试，包括：

将所述测试工具包引入web项目中；

在单元测试文件中使用所述测试工具包提供的查询方法和用户事件交互方法进行单元测试用例编码；

代码编辑器或者ide会根据JSDoc文档自动提示查询方法或用户事件交互方法对应的编写测试用例方法的样例代码，以协助用户对所述待测UI组件库进行测试。

第二方面，提供了一种计算机可读存储介质，所述计算机可读介质存储用于设备执行的程序代码，该程序代码包括用于执行如第一方面中的任意一种实现方式中方法的步骤。

第三方面，提供了一种电子设备，所述电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面中的任意一种实现方式中的方法。

本申请具有如下有益效果：本申请通过为UI组件库提供通用的测试工具库，基于该UI组件库的web项目都可以根据该测试工具库快速的对组件进行测试，并减少重复性代码，从而能够从代码层面上提高测试效率，另外，开发者无需再去翻阅源码，查看元素如何查询与用户事件如何触发，提供的工具库会实现这些步骤，从而能够降低测试难度，其次，本申请能够自动提示测试工具库每个方法的使用方式及基本测试代码，使开发者无需再去查阅使用文档，从而能够从用户操作上提高测试效率。

附图说明

构成本申请的一部分的附图用于来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例1的基于Testing Library的UI组件库测试方法的流程图；

图2是本申请实施例3的电子设备的内部结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

实施例1

本申请实施例1所涉及的一种基于Testing Library的UI组件库测试方法，包括：对待测UI组件库进行全局配置；对所述待测UI组件库中组件关键DOM节点的查询方法进行抽离；对所述待测UI组件库中组件的用户事件交互方法进行抽离；根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例；在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档；将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试，该方法通过为UI组件库提供通用的测试工具库，基于该UI组件库的web项目都可以根据该测试工具库快速的对组件进行测试，并减少重复性代码，从而能够从代码层面上提高测试效率，另外，开发者无需再去翻阅源码，查看元素如何查询与用户事件如何触发，提供的工具库会实现这些步骤，从而能够降低测试难度，其次，该方法还能够自动提示测试工具库每个方法的使用方式及基本测试代码，使开发者无需再去查阅使用文档，从而能够从用户操作上提高测试效率。

具体的，图1示出了申请实施例1中的基于Testing Library的UI组件库测试方法的流程图，包括：

S100、对待测UI组件库进行全局配置，其中，全局配置包括：组件库的统一样式前缀、组件库的图标样式前缀和组件库的弹出层默认渲染父节点；

具体的，新建一个ts文件名为provider.ts，文件模块内声明一个全局配置变量用来保存用户传入的配置项，并导出该全局变量的set与get方法。

S200、对所述待测UI组件库中组件关键DOM节点的查询方法和用户事件交互方法进行抽离，其中，对所述待测UI组件库中组件关键DOM节点的查询方法进行封装并导出，其中，所述待测UI组件库中组件关键DOM节点的查询方法包括以下查询方法中的至少一种：组件根容器DOM节点的查询方法、组件各个交互DOM节点的查询方法和组件中指定某个子元素DOM节点的查询方法，对所述待测UI组件库中组件的用户事件交互方法进行抽离，包括：使用Testing Library对每个组件的用户事件交互方法进行封装并导出；

需要说明的是，在完成全局配置后，将UI组件库进行模块拆分，拆分成结构化目录，每一个组件对应一个文件夹，且文件夹名与组件名一致，文件夹内包含单测文件与包含所有查询方法与用户事件交互方法的统一入口文件；

具体的，将每个组件对应的文件夹名以小驼峰形式命名，例如：autoComplete，文件夹下包含单测文件夹__tests__与统一入口文件index.ts, __tests__文件夹内部包含该组件的所有单测文件，且单测文件以组件名+test.tsx的格式命名，例如：autoComplete.test.tsx；

在完成结构化目录拆分后，在每个组件的统一入口文件中编写该组件的查询方法与用户事件交互方法，包括以下步骤：读取provider.ts中配置的全局配置，获取组件库的全局样式前缀等变量，编写查询方法与用户事件交互方法，引用全局样式变量，最后对所有方法进行模块导出。

具体的，编写查询方法，包括但不限于组件根容器的DOM节点查询方法，可交互节点DOM节点查询方法等，例如：query、queryDropdown等，入参需传入根容器DOM节点container与查询的下标index，index从0开始计数，例如：input.query(container, 1) 表示查询根容器container下的第2个input组件。

具体的，编写用户事件交互方法，包括所有UI组件向用户暴露的用户事件回调方法，每个方法以fire开头，例如：fireInput，表示触发用户输入事件，方法内部会使用Testing Library提供的事件触发方法去模拟用户行为，入参需传入根容器DOM节点container与交互事件需要的额外参数，例如：input.fireInput(container, “hello”)，表示在根容器container中找到第一个input组件，并触发用户输入事件输入“hello”，其中，container可来自query方法的返回值，如想要在第二个input组件中键入“hello”，则可以使用input.fireInput(input.query(container, 1), “hello”)进行组合使用。

S300、根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例，具体包括：引入JavaScript的测试框架，搭建测试环境；为每一个查询方法与用户事件交互方法编写至少一个测试用例，对所述测试用例添加JSDoc注释，并通过JSDoc中的@link变量来标识所述测试用例所测试的方法的名称，其中，测试的方法为查询方法或用户事件交互方法；

具体的，在编写完所述方法（其中，所述方法包括查询方法和用户事件交互方法）后，对所述方法编写单元测试用例，并使用JSDoc特殊标识单元测试用例块代码，具体的，引入包括但不限于Jest、Mocha等JavaScript测试框架，在组件的__tests__文件夹单测文件中编写测试用例，为每一个方法提供至少一个单元测试用例，并为该单元测试用例代码块添加一个JSDoc注释变量@link，变量值为该测试用例所测试覆盖的方法名称，例如：@linkfireInput，代码示例：

/**

* @link fireClick

*/

test('test fireClick', () =>{

const fn = jest.fn();

const { container } = render(<Button onClick={fn}>Button</Button>);

button.fireClick(container);

expect(fn).toBeCalled();

});

通过tsc命令将所有ts代码编译成CommonJs代码与d.ts类型文件，并输出至dist目录。

在进一步的实施例中，在测试用例编写完成后，保存所述测试用例的代码与所述测试用例所测试方法之间的映射关系，具体包括以下步骤：遍历源码中的单元测试代码，以得到每个单元测试用例的代码；根据JSDoc中的@link标识来获取对应的单元测试块所测试的查询方法或用户事件交互方法的名称；对查询方法或用户事件交互方法的名称与对应的单元测试代码的映射关系进行保存。

具体的，使用脚本将源代码中的单元测试用例代码与.d.ts类型文件关联起来，具体的，引入ts-morph包来处理操作ts与js文件的AST抽象语法树，将所有单测文件作为原始文件加入到ts-morph解析中，获取所有单测文件的SourceFile对象数组，每个SourceFile会解析出该文件中代码的AST抽象语法树，文件路径信息等数据，由于每个单测文件的路径是结构化的，因此，可以很方便的根据文件路径获取该单测文件对应的组件名。

遍历AST抽象语法树，访问每个单元测试方法代码块及该单元测试代码块的JSDoc注释，解析JSDoc注释，如果包含了@link标识，则把该代码块中的代码以及@link所指向的方法名称之间的映射关系保存起来，在遍历完成后，便得到了每个组件对应的每个方法及其单元测试代码的映射关系数据对象。

S400、在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档，具体包括：将测试用例的代码编译成CommonJS代码和d.ts类型文件；遍历编译后的代码，读取每个组件的d.ts类型文件，解析成AST抽象语法树；遍历访问AST抽象语法树，获取类型文件中的查询方法和用户事件交互方法的类型定义；根据所述类型定义中的查询方法或用户事件交互方法的名称从保存的查询方法或用户事件交互方法的名称与单元测试代码映射关系中找到对应的单元测试代码；对AST抽象语法树进行操作以将单元测试代码追加到对应的方法的JSDoc注释中的@example变量中，以完成JSDoc文档的自动生成；将编译后的代码打包为测试工具包；

具体的，在得到映射关系数据对象后，再次通过ts-morph读取并解析编译后的文件目录dist中的文件，遍历其中的所有d.ts类型文件，每个类型文件包含了其关联的js文件中的所有变量与函数声明定义。

同样的，源码编译后的dist目录也是结构化的，可以根据SourceFile获取每个d.ts类型文件的路径并分析出对应的组件名称。

操作SourceFile对应的AST抽象语法树，遍历所有声明语句，如果是FunctionDeclaration节点类型，并且该节点的名称能从所述保存的映射关系数据对象中找到对应的单元测试代码，则操作该节点并在该节点上追加JsDoc注释变量，变量名为@example，表示案例代码，变量值为找到的单元测试代码，这样就完成了根据单元测试代码自动生成JSDoc注释文档，至此，测试需要的工具库编写完成。

S500、将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试，具体包括：将所述测试工具包引入web项目中；在单元测试文件中使用所述测试工具包提供的查询方法和用户事件交互方法进行单元测试用例编码；代码编辑器或者ide会根据JSDoc文档自动提示查询方法或用户事件交互方法对应的编写测试用例方法的样例代码，以协助用户对所述待测UI组件库进行测试。

具体的，在使用了UI组件库的web项目中引入所述工具库，搭建Jest测试框架，在web项目中引入工具库的provider的set方法，对UI组件库进行全局配置，例如：声明样式前缀为ant, 则在Jest的setupTest文件中添加以下代码setProvider({prefixCls:“ant”}), 其中setupTest文件为Jest框架在运行每个测试文件代码前会预先执行的文件。

在web项目中新增一个组件，该组件引用了UI组件库中的组件，例如：所述新增组件内包含了两个所述UI组件库中input输入框，名称分别为username与password, 还包含一个button按钮，为所述新增组件添加单元测试用例，在单元测试代码中引入测试工具库中导出的input 的query与fireInput方法，button的fireClick方法，通过TestingLibrary的render方法在测试环境中渲染所述新增组件，render方法返回值中可以解构出container渲染根容器节点，将container传入input的query方法中，并传入下标获取到username与password对应的组件容器节点，再通过fireInput分别触发两个组件容器的输入事件，进行用户事件输入的模拟，最后通过button的fireClick方法触发唯一一个按钮的点击事件，针对触发的这些行为事件添加测试断言，判断单元测试是否通过。

实施例2

本申请实施例2所涉及的一种计算机可读存储介质，所述计算机可读介质存储用于设备执行的程序代码，该程序代码包括用于执行如本申请实施例1中的任意一种实现方式中方法的步骤；

其中，计算机可读存储介质可以是只读存储器(read only memory，ROM)，静态存储设备，动态存储设备或者随机存取存储器(random access memory，RAM)；计算机可读存储介质可以存储程序代码，当计算机可读存储介质中存储的程序被处理器执行时，处理器用于执行如本申请实施例1中的任意一种实现方式中方法的步骤。

实施例3

如图2所示，本申请实施例3所涉及的一种电子设备，所述电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如本申请实施例1中的任意一种实现方式中的方法；

其中，处理器可以采用通用的中央处理器(central processing unit，CPU)，微处理器，应用专用集成电路(application specific integrated circuit，ASIC)，图形处理器(graphics processing unit，GPU)或者一个或多个集成电路，用于执行相关程序，以实现本申请实施例1中的任意一种实现方式中的方法。

处理器还可以是一种集成电路电子设备，具有信号的处理能力。在实现过程中，本申请实施例1中的任意一种实现方式中方法的各个步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。

上述处理器还可以是通用处理器、数字信号处理器、专用集成电路(ASIC)、现成可编程门阵列(field programmable gate array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成本申请实施例的数据处理的装置中包括的单元所需执行的功能，或者执行本申请实施例1中的任意一种实现方式中方法。

以上，仅为本申请较佳的具体实施方式；但本申请的保护范围并不局限于此。任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，根据本申请的技术方案及其改进构思加以等同替换或改变，都应涵盖在本申请的保护范围内。

Claims (10)

1.一种基于Testing Library的UI组件库测试方法，其特征在于，包括：

对待测UI组件库进行全局配置；

对所述待测UI组件库中组件关键DOM节点的查询方法进行抽离；

对所述待测UI组件库中组件的用户事件交互方法进行抽离；

根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例；

在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档；

将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试。

2.根据权利要求1所述的基于Testing Library的UI组件库测试方法，其特征在于，所述全局配置包括：组件库的统一样式前缀、组件库的图标样式前缀和组件库的弹出层默认渲染父节点。

3.根据权利要求1所述的基于Testing Library的UI组件库测试方法，其特征在于，对所述待测UI组件库中组件关键DOM节点的查询方法进行抽离，包括：对所述待测UI组件库中组件关键DOM节点的查询方法进行封装并导出，其中，所述待测UI组件库中组件关键DOM节点的查询方法包括以下查询方法中的至少一种：组件根容器DOM节点的查询方法、组件各个交互DOM节点的查询方法和组件中指定某个子元素DOM节点的查询方法。

4.根据权利要求3所述的基于Testing Library的UI组件库测试方法，其特征在于，对所述待测UI组件库中组件的用户事件交互方法进行抽离，包括：使用Testing Library对每个组件的用户事件交互方法进行封装并导出。

5.根据权利要求1或4所述的基于Testing Library的UI组件库测试方法，其特征在于，根据抽离出的所述查询方法和用户事件交互方法编写对应的测试用例，包括：

引入JavaScript的测试框架，搭建测试环境；

为每一个查询方法与用户事件交互方法编写至少一个测试用例，对所述测试用例添加JSDoc注释，并通过JSDoc中的@link变量来标识所述测试用例所测试的方法的名称，其中，测试的方法为查询方法或用户事件交互方法。

6.根据权利要求5所述的基于Testing Library的UI组件库测试方法，其特征在于，在测试用例编写完成后，保存所述测试用例的代码与所述测试用例所测试方法之间的映射关系，具体包括以下步骤：

遍历源码中的单元测试代码，以得到每个单元测试用例的代码；

根据JSDoc中的@link标识来获取对应的单元测试块所测试的查询方法或用户事件交互方法的名称；

对查询方法或用户事件交互方法的名称与对应的单元测试代码的映射关系进行保存。

7.根据权利要求6所述的基于Testing Library的UI组件库测试方法，其特征在于，在代码编译完成后根据所述测试用例为所述查询方法和用户事件交互方法生成JSDoc文档，包括：

将测试用例的代码编译成CommonJS代码和d.ts类型文件；

遍历编译后的代码，读取每个组件的d.ts类型文件，解析成AST抽象语法树；

遍历访问AST抽象语法树，获取类型文件中的查询方法和用户事件交互方法的类型定义；

根据所述类型定义中的查询方法或用户事件交互方法的名称从保存的查询方法或用户事件交互方法的名称与单元测试代码映射关系中找到对应的单元测试代码；

对AST抽象语法树进行操作以将单元测试代码追加到对应的方法的JSDoc注释中的@example变量中，以完成JSDoc文档的自动生成；

将编译后的代码打包为测试工具包。

8.根据权利要求7所述的基于Testing Library的UI组件库测试方法，其特征在于，将所述查询方法和用户事件交互方法引入web项目中并为用户提供样例代码，以协助用户对所述待测UI组件库进行测试，包括：

将所述测试工具包引入web项目中；

在单元测试文件中使用所述测试工具包提供的查询方法和用户事件交互方法进行单元测试用例编码；

代码编辑器或者ide会根据JSDoc文档自动提示查询方法或用户事件交互方法对应的编写测试用例方法的样例代码，以协助用户对所述待测UI组件库进行测试。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储用于设备执行的程序代码，该程序代码包括用于执行如权利要求1-8中任一项所述方法的步骤。

10.一种电子设备，其特征在于，所述电子设备包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1-8中任一项所述的方法。