diff --git a/jest.config.js b/jest.config.js
index 41c5cf1507..484670c2bc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -48,10 +48,10 @@ module.exports = {
   coverageReporters: ["html"],
   coverageThreshold: {
     global: {
-      branches: 6,
-      functions: 7,
-      lines: 9,
-      statements: 9,
+      branches: 9,
+      functions: 11.5,
+      lines: 15,
+      statements: 15,
     },
   },
 };
diff --git a/jest/setupTests.ts b/jest/setupTests.ts
index de4913dcf0..c92f8a37fd 100644
--- a/jest/setupTests.ts
+++ b/jest/setupTests.ts
@@ -2,6 +2,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import 'jest-styled-components';
 import 'jest-canvas-mock';
+
 // @ts-igore
 window.URL.createObjectURL = function() {};
 Enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/component/package.json b/packages/component/package.json
index add7e0b3ed..e0c0399801 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -34,6 +34,9 @@
     "reflect-metadata": "^0.1.13",
     "supercluster": "^7.0.0"
   },
+  "devDependencies": {
+    "@antv/l7-test-utils": "2.9.23"
+  },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"
diff --git a/packages/component/src/control/__tests__/BaseControl.spec.ts b/packages/component/src/control/__tests__/BaseControl.spec.ts
new file mode 100644
index 0000000000..f4efc459d0
--- /dev/null
+++ b/packages/component/src/control/__tests__/BaseControl.spec.ts
@@ -0,0 +1,23 @@
+describe('BaseControl', () => {
+    // const el = document.createElement('div');
+    // el.id = 'test-div-id';
+    // el.style.width = '500px';
+    // el.style.height = '500px';
+    // el.style.position = 'absolute';
+    // document.querySelector('body')?.appendChild(el);
+    // const scene = new Scene({
+    //   id: 'test-div-id',
+    //   map: new Map({
+    //     style: 'dark',
+    //     center: [110.19382669582967, 30.258134],
+    //     pitch: 0,
+    //     zoom: 3,
+    //   }),
+    // });
+    it('control', () => {
+        expect(1).toEqual(1)
+      });
+      
+    
+  });
+  
\ No newline at end of file
diff --git a/packages/component/src/control/__tests__/zoom.spec.ts b/packages/component/src/control/__tests__/zoom.spec.ts
new file mode 100644
index 0000000000..0cd05cff56
--- /dev/null
+++ b/packages/component/src/control/__tests__/zoom.spec.ts
@@ -0,0 +1,17 @@
+import Zoom from '../zoom';
+import { TestScene } from '@antv/l7-test-utils'
+
+
+describe('zoom', () => {
+   const zoom = new Zoom()
+    it('zoom getDefault', () => {
+         expect(zoom.getDefault().name).toEqual('zoom');
+         const scene = TestScene();
+         scene.addControl(zoom);
+         zoom.disable();
+    
+      });
+      
+    
+  });
+  
\ No newline at end of file
diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts
index 05e3ab1cd1..92d441d992 100644
--- a/packages/core/src/services/config/IConfigService.ts
+++ b/packages/core/src/services/config/IConfigService.ts
@@ -6,6 +6,7 @@ import { IRenderConfig } from '../renderer/IRendererService';
 export interface ISceneConfig extends IRenderConfig {
   id: string | HTMLDivElement;
   canvas?: HTMLCanvasElement;
+  gl?: any,
   hasBaseMap?: boolean;
   map: IMapWrapper;
   logoPosition?: PositionName;
diff --git a/packages/core/src/services/renderer/IRendererService.ts b/packages/core/src/services/renderer/IRendererService.ts
index bc3715f146..227685d889 100644
--- a/packages/core/src/services/renderer/IRendererService.ts
+++ b/packages/core/src/services/renderer/IRendererService.ts
@@ -48,7 +48,7 @@ export interface IExtensions {
 
 export interface IRendererService {
   extensionObject: IExtensions;
-  init(canvas: HTMLCanvasElement, cfg: IRenderConfig): Promise<void>;
+  init(canvas: HTMLCanvasElement, cfg: IRenderConfig,gl: any): Promise<void>;
   testExtension(name: string): boolean;
   clear(options: IClearOptions): void;
   createModel(options: IModelInitializationOptions): IModel;
diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts
index 7c954c6385..bb8cba7ec6 100644
--- a/packages/core/src/services/scene/SceneService.ts
+++ b/packages/core/src/services/scene/SceneService.ts
@@ -200,7 +200,9 @@ export default class Scene extends EventEmitter implements ISceneService {
           // @ts-ignore
           this.canvas,
           this.configService.getSceneConfig(this.id) as IRenderConfig,
+          sceneConfig.gl
         );
+        this.initContainer()
 
         elementResizeEvent(
           this.$container as HTMLDivElement,
@@ -284,6 +286,7 @@ export default class Scene extends EventEmitter implements ISceneService {
           // @ts-ignore
           sceneConfig.canvas,
           this.configService.getSceneConfig(this.id) as IRenderConfig,
+          undefined,
         );
       } else {
         console.error('容器 id 不存在');
diff --git a/packages/map/src/index.ts b/packages/map/src/index.ts
index 17645bd510..72d44e2709 100644
--- a/packages/map/src/index.ts
+++ b/packages/map/src/index.ts
@@ -1,2 +1,3 @@
 export * from './map';
 export * from './earthmap';
+export * from './interface';
\ No newline at end of file
diff --git a/packages/map/src/map.ts b/packages/map/src/map.ts
index 0177b06331..f2547ae455 100644
--- a/packages/map/src/map.ts
+++ b/packages/map/src/map.ts
@@ -119,10 +119,7 @@ export class Map extends Camera {
   }
 
   public resize(eventData?: any) {
-    const dimensions = this.containerDimensions();
-    const width = dimensions[0];
-    const height = dimensions[1];
-
+    const [width, height] = this.containerDimensions();
     this.transform.resize(width, height);
     // TODO: 小程序环境不需要执行后续动作
     if (isMini) {
@@ -372,6 +369,9 @@ export class Map extends Camera {
       } else {
         width = this.container.clientWidth;
         height = this.container.clientHeight;
+        width = width == 0 ? 400 : width;
+        height = height === 0 ? 300 : height;
+       
       }
     }
     return [width, height];
diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts
index 5f06404f0d..200dd60bea 100644
--- a/packages/maps/src/map/map.ts
+++ b/packages/maps/src/map/map.ts
@@ -103,6 +103,7 @@ export default class L7MapService implements IMapService<Map> {
       return this.simpleMapCoord.getSize();
     }
     const size = this.map.transform;
+
     return [size.width, size.height];
   }
   // get mapStatus method
diff --git a/packages/maps/src/utils.ts b/packages/maps/src/utils.ts
index 9f1658928f..f476b25f98 100644
--- a/packages/maps/src/utils.ts
+++ b/packages/maps/src/utils.ts
@@ -42,8 +42,5 @@ export function toPaddingOptions(padding: IPadding = {}) {
     }
   }
 
-  return {
-    ...defaultPadding,
-    ...padding,
-  };
+  return Object.assign({},defaultPadding,padding)
 }
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index fe06f0c777..6b0a03752e 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -25,7 +25,8 @@
   "author": "xiaoiver",
   "license": "ISC",
   "devDependencies": {
-    "gl": "^5.0.3"
+    "gl": "^5.0.3",
+    "@antv/l7-test-utils": "2.9.23"
   },
   "dependencies": {
     "@antv/l7-core": "2.9.23",
@@ -36,6 +37,7 @@
     "lodash": "^4.17.15",
     "reflect-metadata": "^0.1.13"
   },
+  
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"
diff --git a/packages/renderer/src/regl/__tests__/attribute.spec.ts b/packages/renderer/src/regl/__tests__/attribute.spec.ts
index 76adad8a26..c7b3063f0e 100644
--- a/packages/renderer/src/regl/__tests__/attribute.spec.ts
+++ b/packages/renderer/src/regl/__tests__/attribute.spec.ts
@@ -6,7 +6,7 @@ import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglAttribute', () => {
   let context;
diff --git a/packages/renderer/src/regl/__tests__/elements.spec.ts b/packages/renderer/src/regl/__tests__/elements.spec.ts
index 5eebacb1b0..c22fdef3b5 100644
--- a/packages/renderer/src/regl/__tests__/elements.spec.ts
+++ b/packages/renderer/src/regl/__tests__/elements.spec.ts
@@ -7,7 +7,7 @@ import ReglBuffer from '../ReglBuffer';
 import ReglElements from '../ReglElements';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglElements', () => {
   let context;
diff --git a/packages/renderer/src/regl/__tests__/framebuffer.spec.ts b/packages/renderer/src/regl/__tests__/framebuffer.spec.ts
index 681ff8f8b5..e10107a04a 100644
--- a/packages/renderer/src/regl/__tests__/framebuffer.spec.ts
+++ b/packages/renderer/src/regl/__tests__/framebuffer.spec.ts
@@ -10,7 +10,7 @@ import ReglModel from '../ReglModel';
 import ReglRenderbuffer from '../ReglRenderbuffer';
 import ReglTexture2D from '../ReglTexture2D';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglFramebuffer', () => {
   let context;
diff --git a/packages/renderer/src/regl/__tests__/model.draw.spec.ts b/packages/renderer/src/regl/__tests__/model.draw.spec.ts
index ee07bd007e..d961089031 100644
--- a/packages/renderer/src/regl/__tests__/model.draw.spec.ts
+++ b/packages/renderer/src/regl/__tests__/model.draw.spec.ts
@@ -6,7 +6,7 @@ import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('Initialization for ReglModel', () => {
diff --git a/packages/renderer/src/regl/__tests__/model.spec.ts b/packages/renderer/src/regl/__tests__/model.spec.ts
index 1ae2971096..9482a56d24 100644
--- a/packages/renderer/src/regl/__tests__/model.spec.ts
+++ b/packages/renderer/src/regl/__tests__/model.spec.ts
@@ -1,7 +1,7 @@
 import regl from 'l7regl';
 import 'reflect-metadata';
 import ReglModel from '../ReglModel';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('ReglModel', () => {
   let context;
diff --git a/packages/renderer/src/regl/__tests__/model.uniform.spec.ts b/packages/renderer/src/regl/__tests__/model.uniform.spec.ts
index 8c079efc51..2956e242ed 100644
--- a/packages/renderer/src/regl/__tests__/model.uniform.spec.ts
+++ b/packages/renderer/src/regl/__tests__/model.uniform.spec.ts
@@ -3,7 +3,7 @@ import 'reflect-metadata';
 import ReglFramebuffer from '../ReglFramebuffer';
 import ReglModel from '../ReglModel';
 import ReglTexture2D from '../ReglTexture2D';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 
 describe('uniforms in ReglModel', () => {
   let gl;
diff --git a/packages/renderer/src/regl/__tests__/renderer.spec.ts b/packages/renderer/src/regl/__tests__/renderer.spec.ts
index 8788251d7d..19f6ef8e3f 100644
--- a/packages/renderer/src/regl/__tests__/renderer.spec.ts
+++ b/packages/renderer/src/regl/__tests__/renderer.spec.ts
@@ -7,7 +7,7 @@ import { ReglRendererService } from '../../index';
 import ReglAttribute from '../ReglAttribute';
 import ReglBuffer from '../ReglBuffer';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('ReglRendererService', () => {
diff --git a/packages/renderer/src/regl/__tests__/texture.spec.ts b/packages/renderer/src/regl/__tests__/texture.spec.ts
index 5bf99e72de..31ef212b25 100644
--- a/packages/renderer/src/regl/__tests__/texture.spec.ts
+++ b/packages/renderer/src/regl/__tests__/texture.spec.ts
@@ -8,7 +8,7 @@ import ReglBuffer from '../ReglBuffer';
 import ReglModel from '../ReglModel';
 import ReglTexture2D from '../ReglTexture2D';
 import checkPixels from './utils/check-pixels';
-import createContext from './utils/create-context';
+import { createContext } from '@antv/l7-test-utils';
 import globalDefaultprecision from './utils/default-precision';
 
 describe('ReglTexture', () => {
diff --git a/packages/renderer/src/regl/index.ts b/packages/renderer/src/regl/index.ts
index 7655db28fa..b62a8f3799 100644
--- a/packages/renderer/src/regl/index.ts
+++ b/packages/renderer/src/regl/index.ts
@@ -48,46 +48,51 @@ export default class ReglRendererService implements IRendererService {
   public async init(
     canvas: HTMLCanvasElement,
     cfg: IRenderConfig,
+    gl?: regl.Regl,
   ): Promise<void> {
     // this.$container = $container;
     this.canvas = canvas;
-    // tslint:disable-next-line:typedef
-    this.gl = await new Promise((resolve, reject) => {
-      regl({
-        canvas: this.canvas,
-        attributes: {
-          alpha: true,
-          // use TAA instead of MSAA
-          // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
-          antialias: cfg.antialias,
-          premultipliedAlpha: true,
-          preserveDrawingBuffer: cfg.preserveDrawingBuffer,
+    if (gl) {
+      this.gl = gl;
+    } else {
+      // tslint:disable-next-line:typedef
+      this.gl = await new Promise((resolve, reject) => {
+        regl({
+          canvas: this.canvas,
+          attributes: {
+            alpha: true,
+            // use TAA instead of MSAA
+            // @see https://www.khronos.org/registry/webgl/specs/1.0/#5.2.1
+            antialias: cfg.antialias,
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: cfg.preserveDrawingBuffer,
 
-          stencil: cfg.stencil,
-        },
-        // TODO: use extensions
-        extensions: [
-          'OES_element_index_uint',
-          'OES_standard_derivatives', // wireframe
-          'ANGLE_instanced_arrays', // VSM shadow map
-        ],
-        optionalExtensions: [
-          'oes_texture_float_linear',
-          'OES_texture_float',
-          'EXT_texture_filter_anisotropic',
-          'EXT_blend_minmax',
-          'WEBGL_depth_texture',
-        ],
-        profile: true,
-        onDone: (err: Error | null, r?: regl.Regl | undefined): void => {
-          if (err || !r) {
-            reject(err);
-          }
-          // @ts-ignore
-          resolve(r);
-        },
+            stencil: cfg.stencil,
+          },
+          // TODO: use extensions
+          extensions: [
+            'OES_element_index_uint',
+            'OES_standard_derivatives', // wireframe
+            'ANGLE_instanced_arrays', // VSM shadow map
+          ],
+          optionalExtensions: [
+            'oes_texture_float_linear',
+            'OES_texture_float',
+            'EXT_texture_filter_anisotropic',
+            'EXT_blend_minmax',
+            'WEBGL_depth_texture',
+          ],
+          profile: true,
+          onDone: (err: Error | null, r?: regl.Regl | undefined): void => {
+            if (err || !r) {
+              reject(err);
+            }
+            // @ts-ignore
+            resolve(r);
+          },
+        });
       });
-    });
+    }
 
     this.extensionObject = {
       OES_texture_float: this.testExtension('OES_texture_float'),
diff --git a/packages/scene/__tests__/index.spec.ts b/packages/scene/__tests__/index.spec.ts
index 363f1dcc80..4c79b26611 100644
--- a/packages/scene/__tests__/index.spec.ts
+++ b/packages/scene/__tests__/index.spec.ts
@@ -1,37 +1,24 @@
 // @ts-ignore
-import { Map } from '@antv/l7-maps';
-import { Scene } from '../src/';
-describe('template', () => {
-  // const el = document.createElement('div');
-  // el.id = 'test-div-id';
-  // el.style.width = '500px';
-  // el.style.height = '500px';
-  // el.style.position = 'absolute';
-  // document.querySelector('body')?.appendChild(el);
-  // const scene = new Scene({
-  //   id: 'test-div-id',
-  //   map: new Map({
-  //     style: 'dark',
-  //     center: [110.19382669582967, 30.258134],
-  //     pitch: 0,
-  //     zoom: 3,
-  //   }),
-  // });
+import { TestScene } from '@antv/l7-test-utils'
 
-  it('scene map method', () => {
-    // expect(scene.getZoom()).toEqual(3);
-    // expect(scene.getPitch()).toEqual(0);
-    // const center = scene.getCenter();
-    // expect(center.lng).toEqual(110.19382669582967);
-    // expect(center.lat).toEqual(30.258134);
-    // expect(scene.getRotation()).toEqual(-0);
-    // // expect(scene.getBounds()[0].map((v) => v.toFixed(5))).toEqual(
-    // //   [88.22117044582802, 9.751305353647084].map((v) => v.toFixed(5)),
-    // // ); // TODO  校验不通过
-    // scene.setZoom(5);
-    // expect(scene.getZoom()).toEqual(5);
-    // scene.setPitch(5);
-    // expect(scene.getPitch()).toEqual(5);
-    expect(3).toEqual(3);
+
+describe('template', () => {
+
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  const body = document.querySelector('body') as HTMLBodyElement;
+  body.appendChild(el);
+  const scene = TestScene({});
+  
+
+  it('scene map status', async () => {
+    expect( scene.getZoom()).toEqual(3)
+    expect(scene.getMinZoom()).toEqual(-2)
+    expect(scene.getMaxZoom()).toEqual(22)
+    expect(scene.getType()).toEqual('default');
+    expect(scene.getBounds()).toEqual([[92.61570169583138, 18.27006017947646], [127.7719516958324, 40.94589761553888]])
   });
+
+ 
+
 });
diff --git a/packages/scene/package.json b/packages/scene/package.json
index b29330b5ca..2bec08bdb3 100644
--- a/packages/scene/package.json
+++ b/packages/scene/package.json
@@ -34,6 +34,9 @@
     "mapbox-gl": "^1.2.1",
     "reflect-metadata": "^0.1.13"
   },
+  "devDependencies": {
+    "@antv/l7-test-utils": "2.9.23"
+  },
   "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",
   "publishConfig": {
     "access": "public"
diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts
index 2132802b6d..aab102d122 100644
--- a/packages/scene/src/index.ts
+++ b/packages/scene/src/index.ts
@@ -64,7 +64,7 @@ class Scene
   private container: Container;
 
   public constructor(config: ISceneConfig) {
-    const { id, map, canvas, hasBaseMap } = config;
+    const { id, map, canvas, hasBaseMap, } = config;
     // 创建场景容器
     const sceneContainer = createSceneContainer();
     this.container = sceneContainer;
diff --git a/packages/test-utils/.fatherrc.ts b/packages/test-utils/.fatherrc.ts
new file mode 100644
index 0000000000..1bb7f40993
--- /dev/null
+++ b/packages/test-utils/.fatherrc.ts
@@ -0,0 +1,30 @@
+export default {
+  // more father 4 config: https://github.com/umijs/father-next/blob/master/docs/config.md
+  esm: {
+    output:'es'
+  },
+  cjs: {
+    output:'lib'
+  },
+  autoprefixer: {
+    browsers: ['IE 11', 'last 2 versions'],
+  },
+  extraBabelPresets: [
+    '@babel/preset-typescript'
+  ],
+  extraBabelPlugins: [
+    // 开发模式下以原始文本引入，便于调试
+    [
+      // import glsl as raw text
+      'babel-plugin-inline-import',
+      {
+        extensions: [
+          '.glsl'
+        ]
+      }
+    ],
+    [
+      'transform-import-css-l7'
+    ],
+  ],
+};
diff --git a/packages/test-utils/.gitignore b/packages/test-utils/.gitignore
new file mode 100644
index 0000000000..49c199b6ab
--- /dev/null
+++ b/packages/test-utils/.gitignore
@@ -0,0 +1,3 @@
+lib
+es
+dist
diff --git a/packages/test-utils/README.md b/packages/test-utils/README.md
new file mode 100644
index 0000000000..362d988b74
--- /dev/null
+++ b/packages/test-utils/README.md
@@ -0,0 +1,11 @@
+# `test-utils`
+
+> TODO: description
+
+## Usage
+
+```
+const testUtils = require('test-utils');
+
+// TODO: DEMONSTRATE API
+```
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
new file mode 100644
index 0000000000..b15a9a8deb
--- /dev/null
+++ b/packages/test-utils/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@antv/l7-test-utils",
+  "version": "2.9.23",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "lzxue <lzx199065@gmail.com>",
+  "license": "ISC",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "lib",
+    "es",
+    "dist",
+    "README.md"
+  ],
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npm.alibaba-inc.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antvis/L7.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "father build",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "sync": "tnpm sync"
+  },
+  "bugs": {
+    "url": "https://github.com/antvis/L7/issues"
+  },
+ "devDependencies": {
+   "@antv/l7-map": "2.9.23",
+   "@antv/l7-maps": "2.9.23",
+   "@antv/l7-scene": "2.9.23",
+   "l7regl": "^0.0.20",
+   "gl": "^5.0.3"
+ },
+  "homepage": "https://github.com/antvis/L7#readme"
+}
diff --git a/packages/test-utils/src/check-pixels.ts b/packages/test-utils/src/check-pixels.ts
new file mode 100644
index 0000000000..b67cac7f23
--- /dev/null
+++ b/packages/test-utils/src/check-pixels.ts
@@ -0,0 +1,15 @@
+import regl from 'l7regl';
+
+// borrow from https://github.com/regl-project/regl/blob/gh-pages/test/attributes.js#L303-L311
+export default function checkPixels(
+  reGL: regl.Regl,
+  expected: number[],
+): boolean {
+  const actual = reGL.read();
+  for (let i = 0; i < 1 * 1; ++i) {
+    if (actual[4 * i] !== expected[i]) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/packages/test-utils/src/create-context.ts b/packages/test-utils/src/create-context.ts
new file mode 100644
index 0000000000..4c323846aa
--- /dev/null
+++ b/packages/test-utils/src/create-context.ts
@@ -0,0 +1,23 @@
+import gl from 'gl';
+
+// borrow from regl
+// @see https://github.com/regl-project/regl/blob/gh-pages/test/util/create-context.js#L28
+const CONTEXT = gl(1, 1, { preserveDrawingBuffer: true });
+// @ts-ignore
+const RESIZE = CONTEXT.getExtension('STACKGL_resize_drawingbuffer');
+
+// @ts-ignore
+export default function(width: number, height: number) {
+  resize(width, height);
+  return CONTEXT;
+}
+
+export function resize(width: number, height: number) {
+  if (RESIZE) {
+    RESIZE.resize(width, height);
+  }
+}
+
+export function destroy() {
+  //
+}
diff --git a/packages/test-utils/src/default-precision.ts b/packages/test-utils/src/default-precision.ts
new file mode 100644
index 0000000000..34b008a81e
--- /dev/null
+++ b/packages/test-utils/src/default-precision.ts
@@ -0,0 +1,3 @@
+const globalDefaultprecision =
+  '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
+export default globalDefaultprecision;
diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts
new file mode 100644
index 0000000000..a951bd69bd
--- /dev/null
+++ b/packages/test-utils/src/index.ts
@@ -0,0 +1,2 @@
+export * from './test-scene'
+export { default as createContext } from './create-context'
\ No newline at end of file
diff --git a/packages/test-utils/src/test-scene.ts b/packages/test-utils/src/test-scene.ts
new file mode 100644
index 0000000000..f8f4a67be8
--- /dev/null
+++ b/packages/test-utils/src/test-scene.ts
@@ -0,0 +1,28 @@
+import createContext from './create-context';
+import { Scene } from '@antv/l7-scene';
+import regl from 'l7regl';
+import { IMapOptions } from '@antv/l7-map';
+import { Map } from '@antv/l7-maps';
+
+export function TestScene(options?: Partial<IMapOptions>) {
+  const el = document.createElement('div');
+  el.id = 'test-div-id';
+  const body = document.querySelector('body') as HTMLBodyElement;
+  body.appendChild(el);
+
+  const context = createContext(400, 300);
+  const reGL = regl(context);
+  const scene = new Scene({
+    id: el,
+    gl: reGL,
+    map: new Map({
+      style: 'dark',
+      center: [110.19382669582967, 30.258134],
+      pitch: 0,
+      zoom: 3,
+      ...options,
+    }),
+  });
+
+  return scene;
+}
diff --git a/packages/test-utils/tsconfig.build.json b/packages/test-utils/tsconfig.build.json
new file mode 100644
index 0000000000..5de2fd0c07
--- /dev/null
+++ b/packages/test-utils/tsconfig.build.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "declarationDir": "./es",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "paths": {
+      "*": ["node_modules", "typings/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 120e27e543..ddf57c235d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,6 +29,7 @@
       "@antv/l7-source": ["packages/source/src"],
       "@antv/l7-mini": ["packages/mini/src"],
       "@antv/l7-utils": ["packages/utils/src"],
+      "@antv/l7-test-utils":["packages/test-utils/src"],
       "@antv/l7": ["packages/l7/src"],
       "*": ["packages", "typings/*"]
     }
diff --git a/typings.d.ts b/typings.d.ts
index a5569c5891..abc03b1659 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -4,6 +4,9 @@ declare module '@antv/l7-layers';
 declare module '@antv/l7-maps';
 declare module '@antv/l7-utils';
 declare module '@antv/l7-scene';
+declare module '@antv/l7-test-utils';
+declare module '@antv/l7-test-utils';
+declare module '@antv/l7-component';
 declare module 'l7regl';
 declare module 'l7hammerjs';
 declare module 'l7-tiny-sdf';
\ No newline at end of file