小程序微信开发工具新建代码片段成功后怎么直接进行单元测试？

根据该问题，进行了如下尝试

遇到这个问题要怎么解决呀？

SyntaxError: Cannot use import statement outside a module

也发帖请教了解决方案。

尝试引入 babel.config.js 文件，再次运行 jest ，问题解决

module.exports = {
    presets: ['@mpflow/plugin-babel/preset', '@mpflow/plugin-typescript/preset']
}

回到正题

1、先上代码片段 ： https://developers.weixin.qq.com/s/G2jOhomC7TyG

2、翻看官方文档，单元测试 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html

很明显，但看文档是实现不了的。我打开 https://github.com/wechat-miniprogram/miniprogram-simulate 并下载DEMO。通过安装，还是没能实现

然后根据提示 https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/docs/tutorial.md

打开 项目文件 https://github.com/wechat-miniprogram/weui-miniprogram/blob/unit-test/jest.config.js

看完文档后，我只想静静的实现一个 新建代码片段到单元测试的用例。不想太复杂

3、于是动手新建代码示例，然后直接复制 https://github.com/wechat-miniprogram/weui-miniprogram/blob/unit-test/package.json 文件，进行安装，并实现构建npm。引入 badge 组件是直接从项目拿过来的，记得这里要改下 jest.config.js 文件。直接运行 jest 命令 但是遇到了 SyntaxError: Cannot use import statement outside a module 问题。

4、复制 babel.config.js 文件到目录下，再次运行 jest ，运行成功

已开发的实战项目中使用单元测试

实战项目，可先执行
 $ npm install miniprogram-simulate

然后安装 jest 

我是用 $ npm install --save-dev jest 命令的

$ npm install --dev babel-jest @babel/core @babel/preset-env

安装完成后 新建  babel.config.js 文件 跟 jest.config.js 文件到项目目录
//  babel.config.js
module.exports = {
  presets: ['@mpflow/plugin-babel/preset', '@mpflow/plugin-typescript/preset']
}

// jest.config.js 
module.exports = {
    bail: 1,
    verbose: true,
    testEnvironment: 'jsdom',
    testURL: 'https://jest.test',
    moduleFileExtensions: ['js', 'ts'],
    testMatch: ['<rootDir>/tests/**/__test__/**/*.test.{js,ts}'],
    collectCoverageFrom: [
        '<rootDir>/tests/**/*.{js,ts}',
        '!<rootDir>/tests/weui-wxss/**',
        '!**/__test__/**'
    ],
    snapshotSerializers: ['miniprogram-simulate/jest-snapshot-plugin']
}

根据 testMatch 及  collectCoverageFrom 配置

在目录中 新建 tests 目录 ，放入 badge 测试文件。完成单元测试。

如果使用了 mobx-miniprogram ，或者有使用构建npm 的，记得先工具npm构建完后，再改写文件 加入如下安装包 并执行 npm install 命令。 

   "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@mpflow/plugin-babel": "^0.0.36",
    "@mpflow/plugin-css": "^0.0.33",
    "@mpflow/plugin-typescript": "^0.0.33",
    "babel-jest": "^27.5.1", 

https://www.npmjs.com/package/@mpflow/plugin-babel/v/0.0.10?activeTab=versions

https://www.npmjs.com/package/@mpflow/plugin-typescript

https://www.npmjs.com/package/@mpflow/plugin-css

package.json 文件
{
  "dependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@mpflow/plugin-babel": "^0.0.36",
    "@mpflow/plugin-css": "^0.0.33",
    "@mpflow/plugin-typescript": "^0.0.33",
    "babel-jest": "^27.5.1",
    "mobx-miniprogram": "^4.13.2",
    "mobx-miniprogram-bindings": "^2.1.5"
  },
  "devDependencies": {
    "jest": "^27.5.1",
    "miniprogram-simulate": "^1.5.5"
  },
  "scripts": {
    "test": "jest",
    "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose"
  }
}