wx-for="{{"小红,小白,小绿"}}"如果直接这样遍历，结果会是（打印结果如下）： 小 红 ， 小 白 ， 小 绿 怎么解决这个问题？？

测试驱动简介 关于测试驱动的快速入门，可以看之前的这篇文章《 换一种思路写代码，前端测试驱动开发模式(TDD)快速入门》,这篇文章就跳过一些基础的概念。 小程序自动化 来自官方的介绍： [代码]小程序自动化 SDK 为开发者提供了一套通过外部脚本操控小程序的方案，从而实现小程序自动化测试的目的。[代码] 个人理解，这个小程序自动化工具，就是可以用代码去写一些脚本，可以操作[代码]小程序开发者工具[代码]自动的执行一些操作。 官方文档： https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/ 工具的安装和配置 运行环境(来自官方文档): 安装  Node.js  并且版本大于 8.0 基础库版本为  2.7.3  及以上 开发者工具版本为  1.02.1907232  及以上 首先 npm init, 初始化一个项目。 执行下面命令安装工具： [代码]npm i miniprogram-automator --save-dev [代码] 因为需要使用 jest 做为测试的工具，所以需要安装 jest，执行以下两条命令: [代码]npm i jest --save-dev npm i jest -g [代码] 在目录下创建 test 文件夹，创建以[代码].spec.js[代码]结尾的文件，在此文件中写入测试代码, 我这里建立[代码]index.spec.js[代码]。在 package.json 的 script 中添加： [代码]{ "test": "jest" } [代码] 这样[代码]npm run test 文件名[代码]就可以运行指定的测试文件。 连接小程序开发工具 我在尝鲜的时候在这里花了一些时间在连接小程序开发工具上。 首先需要在微信开发者工具， 设置->通用设置->安全中把服务端口打开。 [图片] 在[代码]index.spec.js[代码]中添加连接的代码: [代码]import automator from 'miniprogram-automator' describe('index', () => {   let miniProgram // beforeAll 表示在执行所有测试之前需要的操作 beforeAll(async () => { miniProgram = await automator.launch({ cliPath: `${cli.bat文件的路径}`, // 如果是默认安装路径，就不需要写了 projectPath: `${项目路径}` //这里需要写上项目路径 }) }, 40000) }) [代码] 这时候就可以执行命令来测试连接小程序开发者工具了， 如果连接成功的话，在执行命令后，就会自动打开微信开发者工具，如果连接失败，就是命令行工具会关闭，并且打不开微信开发者工具。 一些连接经验： 为了路径兼容 windows 和 mac 最好用 node 的 path 模块去拼路径 cli.bat 是在微信开发者工具的根目录中，记得写路劲的时候要加上.bat 的后缀名 如果你是默认路径安装的，如果还是打不开，我自己就是遇到这个情况，我是通过 imweb 团队这篇文章中写的，打开自动化操作服务端口后就可以连接使用了 基本使用思路 目前这个工具只有四个 api： Automator, MiniProgram, Page, Element, 点击查看文档。 Automator 主要提供启动和连接开发者工具的方法。 MiniProgram 主要提供操作小程序的一些方法， 比如跳转页面，getSystemInfo, 或者执行 wx 对象上的方法 Page 主要提供操作页面的方法，比如用$获取元素，获取页面的 data,调用页面的方法 element 主要提供元素的操作方法 主要的使用思路就是用代码来操作小程序的操作。比如可以先用 MiniProgram 的页面跳转方法跳转到指定的页面，用 Page 的 callMethod 来执行相关的方法，再选取需要测试的元素，比较是否符合预期。 示例 这里展示一个小的示例。在电商小程序中，大部分页面都需要一进入就需要请求接口拿数据，我们通常把原始数据经过洗数据层变成前端想要的样子。现在就来测试一下是否初始的数据是我们期望的那样。 步骤是： 连接小程序，并且跳转的指定页面 等待初始接口调用 查看 page 的 data，比较是否符合预期 [代码]describe('index', () => { let miniProgram let page // 连接微信开发者工具 beforeAll(async () => { miniProgram = await automator.launch({ projectPath: `${root}` }) page = await miniProgram.reLaunch('/pages/plp/plp') // 使用miniProgram的api跳转到指定页面 await page.waitFor(500) // 等待页面请求接口 }, 40000) it('初始化洗数据后， 初始数据满足要求', async (done)=>{ const data = await page.data() // 使用page的方法获取当前页面的data expect(data).toMatchObject({ items: expect.anything(), facet: expect.anything() }) // 通过jest的expect方法比较这个data是否符合预期 done() }) 在执行 afterAll(async () => { await miniProgram.close() }) }) [代码] 执行 [代码]npm run test index[代码] 后，看到 pass 的字样，就表示这个测试通过了。 Jest 会自动把通过与不通过的测试用例都展示出来。 总结 小程序自动化测试工具 api 很简单，思路也简单易懂，可能连接的时候需要花一点时间。 实施好自动化测试可以提升程序本身的健壮性。 之后还要花一些时间来深入的使用。