test(taro-babel): babel-plugin-transform-taroapi 添加测试用例 (#13603)

* test(babel): taro babel 插件添加单元测试

* test(babel): taro babel 插件添加单元测试

* test(snapshot): 更新快照

* test(snapshot): 更新快照

* test(babel): 删除单元测试无用代码

* test(babel): 删除单元测试无用代码

* chore(advacne): 补充缺失依赖

---------

Co-authored-by: xuanzebin <xuanzebin3@jd.com>

package.json

@@ -25,7 +25,7 @@
     "clear-all": "rimraf **/node_modules",
     "lint": "eslint packages/ --ext .js --ext .ts --ext .tsx",
     "lint:style": "stylelint ./packages/**/*.{css,scss}",
-    "test": "pnpm --parallel -r --filter @tarojs/cli --filter babel-preset-taro --filter @tarojs/components --filter @tarojs/taro-h5 --filter @tarojs/react --filter @tarojs/webpack-runner --filter @tarojs/mini-runner --filter @tarojs/taro-rn --filter @tarojs/components-rn run test:ci",
+    "test": "pnpm --parallel -r --filter @tarojs/cli --filter babel-preset-taro --filter babel-plugin-transform-taroapi --filter @tarojs/components --filter @tarojs/taro-h5 --filter @tarojs/react --filter @tarojs/webpack-runner --filter @tarojs/mini-runner --filter @tarojs/taro-rn --filter @tarojs/components-rn run test:ci",
     "version": "run-s version:*",
     "version:release": "pnpm --parallel -r --filter=./packages/* exec npm version ${npm_package_version}",
     "version:git": "git add . && git commit -m \"chore(release): publish ${npm_package_version}\"",

packages/babel-plugin-transform-taroapi/__tests__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should leave other apis untouched 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;"
+`;
+
+exports[`should move static apis under "Taro" 1`] = `
+"import Taro from '@tarojs/taro-h5';
+Taro.noop;
+Taro.noop();"
+`;
+
+exports[`should not go wrong when using an api twice 1`] = `
+"import Taro, { createAnimation as _createAnimation } from '@tarojs/taro-h5';
+
+const animation = _createAnimation({
+  duration: dura * 1000,
+  timingFunction: 'linear'
+});
+
+const resetAnimation = _createAnimation({
+  duration: 0,
+  timingFunction: 'linear'
+});"
+`;
+
+exports[`should not import taro duplicatly 1`] = `
+"import Taro, { createAnimation as _createAnimation, initPxTransform as _initPxTransform } from "@tarojs/taro-h5";
+Taro.Component;
+
+_createAnimation();
+
+_initPxTransform();"
+`;
+
+exports[`should preserve assignments in lefthands 1`] = `
+"import Taro, { createAnimation as _createAnimation, request as _request } from '@tarojs/taro-h5';
+let animation;
+animation = _createAnimation({
+  transformOrigin: "50% 50%",
+  duration: 1000,
+  timingFunction: "ease",
+  delay: 0
+});
+
+_request();
+
+Taro.request = '';
+Taro['request'] = '';"
+`;
+
+exports[`should preserve default imports 1`] = `
+"import Taro from '@tarojs/taro-h5';
+console.log(Taro);"
+`;
+
+exports[`should support rename of imported names 1`] = `
+"// import { inject as mobxInject, observer as mobxObserver } from '@tarojs/mobx'
+import Taro from "@tarojs/taro-h5";
+export class Connected extends Taro.Component {}"
+`;
+
+exports[`should work! 1`] = `
+"import Taro, { setStorage as _setStorage, initPxTransform as _initPxTransform, getStorage as _getStorage } from '@tarojs/taro-h5';
+
+_initPxTransform(Taro.param);
+
+_initPxTransform();
+
+_initPxTransform();
+
+_getStorage();
+
+_setStorage();
+
+export { Taro };"
+`;

packages/babel-plugin-transform-taroapi/__tests__/index.spec.ts

@@ -1,21 +1,22 @@
-import * as apis from '@tarojs/taro-h5'
-import * as babel from 'babel-core'
-import * as t from 'babel-types'
+import * as babel from '@babel/core'
+import * as t from '@babel/types'
+import * as apis from '@tarojs/plugin-platform-h5/dist/taroApis'
 
 import plugin from '../src'
 
+type ImportType = babel.types.ImportSpecifier | babel.types.ImportDefaultSpecifier | babel.types.ImportNamespaceSpecifier
+
 const pluginOptions = [
   plugin,
   {
     apis,
     packageName: '@tarojs/taro-h5'
   }
 ]
-
 const getNamedImports = (importSpecifiers: (t.ImportSpecifier | t.ImportDefaultSpecifier | t.ImportNamespaceSpecifier)[]) => {
-  return importSpecifiers.reduce((prev, curr: t.ImportSpecifier) => {
+  return importSpecifiers.reduce((prev, curr) => {
     if (t.isImportSpecifier(curr)) {
-      prev.add(curr.imported.name)
+      prev.add(((curr as t.ImportSpecifier).imported as babel.types.Identifier).name)
     }
     return prev
   }, new Set())
@@ -31,33 +32,38 @@ it('should work!', function () {
     setStorage()
     export { Taro }
   `
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+
+  expect(result?.code).toMatchSnapshot()
 })
 
 it('should leave other apis untouched', function () {
   const code = `
     import Taro from '@tarojs/taro-h5'
     Taro.noop
   `
-  const result = babel.transform(code, { plugins: [pluginOptions] })
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] }) as babel.BabelFileResult
   expect(result.code).toMatchSnapshot()
 
   const ast = result.ast as t.File
   const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
   expect(t.isImportDeclaration(body[0])).toBeTruthy()
   expect(t.isExpressionStatement(body[1])).toBeTruthy()
-  const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v))
+  const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v)) as ImportType
   expect(defaultImport).toBeTruthy()
 
   const taroName = defaultImport.local.name
   const namedImports = getNamedImports(body[0].specifiers)
   expect(namedImports).toEqual(new Set())
   expect(t.isMemberExpression(body[1].expression)).toBeTruthy()
-  expect((body[1].expression as t.MemberExpression)).toMatchObject(t.memberExpression(
+
+  const obj = t.memberExpression(
     t.identifier(taroName),
-    t.identifier('noop')
-  ))
+    t.identifier('noop'),
+  )
+  delete obj.optional
+
+  expect((body[1].expression as t.MemberExpression)).toMatchObject(obj)
 })
 
 it('should move static apis under "Taro"', function () {
@@ -67,20 +73,20 @@ it('should move static apis under "Taro"', function () {
     noop();
   `
 
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+  expect(result?.code).toMatchSnapshot()
 
-  const ast = result.ast as t.File
+  const ast = result?.ast as t.File
   const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement]
   expect(t.isImportDeclaration(body[0])).toBeTruthy()
   expect(t.isExpressionStatement(body[1])).toBeTruthy()
   const defaultImport = body[0].specifiers.find(v => t.isImportDefaultSpecifier(v))
   expect(defaultImport).toBeTruthy()
 
   const taroName = defaultImport!.local.name
-  let memberExpression = body[1].expression
+  let memberExpression: any = body[1].expression
   if (t.isCallExpression(body[1])) {
-    memberExpression = (body[1].expression as t.CallExpression).callee
+    memberExpression = ((body[1] as t.ExpressionStatement).expression as t.CallExpression).callee
   }
   expect(memberExpression).toMatchObject(t.memberExpression(
     t.identifier(taroName),
@@ -97,10 +103,9 @@ it('should not import taro duplicatly', function () {
     Taro.initPxTransform()
   `
 
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
-
-  const ast = result.ast as t.File
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+  expect(result?.code).toMatchSnapshot()
+  const ast = result?.ast as t.File
   const body = ast.program.body as [t.ImportDeclaration, t.ExpressionStatement, t.ExpressionStatement]
   expect(t.isImportDeclaration(body[0])).toBeTruthy()
   expect(t.isExpressionStatement(body[1])).toBeTruthy()
@@ -120,8 +125,8 @@ it('should not go wrong when using an api twice', function () {
     })
   `
   expect(() => {
-    const result = babel.transform(code, { plugins: [pluginOptions] })
-    expect(result.code).toMatchSnapshot()
+    const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+    expect(result?.code).toMatchSnapshot()
   }).not.toThrowError()
 })
 
@@ -130,8 +135,8 @@ it('should preserve default imports', function () {
     import Taro from '@tarojs/taro-h5'
     console.log(Taro)
   `
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+  expect(result?.code).toMatchSnapshot()
 })
 
 it('should preserve assignments in lefthands', function () {
@@ -148,8 +153,8 @@ it('should preserve assignments in lefthands', function () {
     Taro.request = ''
     Taro['request'] = ''
   `
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+  expect(result?.code).toMatchSnapshot()
 })
 
 it('should support rename of imported names', function () {
@@ -158,6 +163,6 @@ it('should support rename of imported names', function () {
   import { Component as TaroComponent } from "@tarojs/taro-h5";
   export class Connected extends TaroComponent {}
   `
-  const result = babel.transform(code, { plugins: [pluginOptions] })
-  expect(result.code).toMatchSnapshot()
+  const result = babel.transform(code, { ast: true, configFile: false, plugins: [pluginOptions] })
+  expect(result?.code).toMatchSnapshot()
 })

packages/babel-plugin-transform-taroapi/babel.config.json

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "ios": "9",
+          "android": "4.4"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@babel/plugin-transform-react-jsx"],
+  "env": {
+    "test": {
+      "plugins": ["@babel/plugin-transform-runtime"]
+    }
+  }
+}

packages/babel-plugin-transform-taroapi/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  collectCoverage: false,
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['**/__tests__/**/?(*.)+(spec|test).[jt]s?(x)'],
+  testPathIgnorePatterns: [
+    'node_modules',
+  ],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': ['ts-jest', {
+      diagnostics: false,
+      tsconfig: {
+        allowJs: true
+      }
+    }],
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/']
+}

packages/babel-plugin-transform-taroapi/package.json

@@ -3,7 +3,21 @@
   "version": "3.6.4",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "cross-env NODE_ENV=jest jest",
+    "test:ci": "cross-env NODE_ENV=jest jest --ci -i",
+    "test:dev": "cross-env NODE_ENV=jest jest --watch",
+    "test:coverage": "cross-env NODE_ENV=jest jest --coverage",
+    "updateSnapshot": "cross-env NODE_ENV=jest jest --updateSnapshot"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.5",
+    "@babel/types": "^7.14.5",
+    "babel-jest": "^29.5.0",
+    "jest": "^29.3.1",
+    "jest-cli": "^29.3.1",
+    "ts-jest": "^29.0.5",
+    "typescript": "^4.7.4"
   },
   "license": "MIT"
 }

packages/babel-plugin-transform-taroapi/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.root.json",
+  "compilerOptions": {
+    "allowJs": true
+  }
+}

packages/taro-components-advanced/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@tarojs/components": "workspace:*",
     "@tarojs/shared": "workspace:*",
+    "@tarojs/runtime": "workspace:*",
     "@tarojs/taro": "workspace:*",
     "memoize-one": "^6.0.0",
     "postcss": "^8.4.18"