uni-app 自动化测试 element.data api是否不支持vue3 setup语法糖？

uni-app 自动化测试 element.data api是否不支持vue3 setup语法糖？

示例代码：

import {
	reactive,
	ref
} from 'vue';
let title = ref('Hello')  

describe('input', () => {
	test('input start', async () => {
		const page = await program.currentPage()
		const element = await page.$('.el-input')
		console.log(await page.data('title'))
		console.log(await element.value());
	});
});

操作步骤：

describe('input', () => {
	test('input start', async () => {
		const page = await program.currentPage()
		const element = await page.$('.el-input')
		console.log(await page.data('title'))
		console.log(await element.value());
	});
});

预期结果：

正常输出

实际结果：

输出undefind

bug描述：

vue2的语法能够正常输出，但是使用vue3 setup语法糖，输出的则是undefind
信息项 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 Android
手机系统版本 Android 12
手机厂商 华为
手机机型 mate40
页面类型 vue
Vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

图片

图片


更多关于uni-app 自动化测试 element.data api是否不支持vue3 setup语法糖？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 自动化测试 element.data api是否不支持vue3 setup语法糖？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中进行自动化测试时，如果你使用的是 Vue 3 的 setup 语法糖，可能会遇到一些问题，特别是在使用 element.data API 时。

问题背景

element.data API 是 uni-app 提供的一个用于获取组件数据的接口。它通常用于在自动化测试中获取组件的内部数据。然而，Vue 3 的 setup 语法糖改变了组件的内部结构，可能会导致 element.data API 无法正常工作。

原因分析

在 Vue 3 的 setup 语法糖中，组件的状态和逻辑都封装在 setup 函数中，而不是直接暴露在组件的 data 对象中。因此，element.data API 可能无法正确获取到这些状态。

解决方案

  1. 使用 ref 或 reactive 显式暴露数据： 在 setup 函数中，使用 ref 或 reactive 来定义状态，并确保这些状态在组件中是可访问的。这样，element.data API 可能能够正确获取到这些数据。

    <script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

  2. 使用 expose 方法： 在 setup 函数中，使用 expose 方法显式暴露组件的内部状态和方法。这样，element.data API 可以访问到这些暴露的状态。

    <script setup>
import { ref, expose } from 'vue';

const count = ref(0);

expose({
  count
});
</script>

  3. 使用 Vue Test Utils 进行测试： 如果 element.data API 无法满足需求，可以考虑使用 Vue Test Utils 进行更灵活的测试。Vue Test Utils 提供了更强大的 API 来访问和操作组件的内部状态。

    import { mount } from '[@vue](/user/vue)/test-utils';
import MyComponent from './MyComponent.vue';

test('test component', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.vm.count).toBe(0);
});
回到顶部