uni-app uts好难啊

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app uts好难啊

代码示例

<template>
  <view class="container">
    <view v-for="v in list">
      <text>姓名：{{ v.name }}</text>
    </view>
  </view>
</template>

<script lang="uts" setup>
const db = uniCloud.databaseForJQL()

type User = {
  _id: string,
  name: string,
  age: number,
  gender: number
}

const list = ref<User[]>([])

const getData = async () => {
  const res = await db.collection("users").get()
  list.value = JSON.parse<User[]>(JSON.stringify(res.data))
}

getData()
</script>

<style>
.container {
  padding: 30rpx;
}
</style>

12:32:42.346 error: 类型不匹配: 推断类型是UTSArray<User>?（可为空的UTSArray<User>），但预期的是UTSArray<User>。
开发环境 版本号 项目创建方式
uni-app 未知 Vue

Harmonyos Next教程
3 回复
<template> <view class="container"> <view v-for="v in list"> <text>姓名：{{ v.getString("name") }}</text> </view> </view> </template> <script lang="uts" setup> const db = uniCloud.databaseForJQL() const list = ref<UTSJSONObject[]>([]) const getData = async () => { const res = await db.collection("users").get() list.value = res.data } getData() </script> <style> .container { padding: 30rpx; } </style> 这样才成功了。。。。。。呜呜呜

参考一下文档 https://doc.dcloud.net.cn/uni-app-x/uts/data-type.html#非空断言

确实，uni-app 的UTS（单元测试）部分对于初学者来说可能会有些挑战，但一旦掌握了基本的方法和技巧，就会变得更加容易。下面我将通过一个简单的示例来展示如何在uni-app中进行单元测试，希望这能帮助你更好地理解这个过程。

首先，确保你已经安装了必要的依赖项。uni-app的单元测试通常依赖于Jest和@dcloudio/uni-app-test-utils这样的工具。你可以通过npm或yarn来安装它们：

npm install --save-dev jest [@dcloudio](/user/dcloudio)/uni-app-test-utils

接下来，我们创建一个简单的uni-app组件，并在其中编写一些逻辑以供测试。例如，我们有一个名为Counter.vue的组件：

<template>
  <view>
    <text>{{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

现在，我们编写一个针对这个组件的单元测试。在项目的根目录下创建一个__tests__文件夹（Jest默认会查找这个文件夹中的测试文件），并在其中创建一个名为Counter.spec.js的文件：

import { mount } from '[@dcloudio](/user/dcloudio)/uni-app-test-utils';
import Counter from '@/components/Counter.vue'; // 根据你的项目结构调整路径

describe('Counter.vue', () => {
  it('increments count when button is clicked', async () => {
    const wrapper = mount(Counter);
    
    // 初始count值应为0
    expect(wrapper.vm.count).toBe(0);
    
    // 模拟点击按钮
    await wrapper.find('button').trigger('click');
    
    // 点击后count值应为1
    expect(wrapper.vm.count).toBe(1);
  });
});

在这个测试文件中，我们使用了[@dcloudio](/user/dcloudio)/uni-app-test-utils提供的mount方法来挂载我们的组件，并使用Jest的expect方法来断言组件的状态。我们模拟了按钮点击事件，并验证了点击后count值的变化。

最后，在你的package.json文件中添加一个脚本来运行Jest：

"scripts": {
  "test": "jest"
}

现在，你可以通过运行npm test或yarn test来执行你的单元测试了。

希望这个示例能帮助你更好地理解如何在uni-app中进行单元测试。如果你有更多具体的问题或遇到了困难，欢迎继续提问！

回到顶部