test: refactor the file naming rules of toMatchSnapshot (#5519)

packages/g6/__tests__/unit/behaviors/behavior-drag-canvas.spec.ts

@@ -76,7 +76,7 @@ describe('behavior drag canvas', () => {
     graph.emit(CommonEvent.KEY_UP, { key: 'ArrowRight' });
     expect(graph.getPosition()).toBeCloseTo([x + 20, y]);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('destroy', () => {

packages/g6/__tests__/unit/behaviors/behavior-drag-node.spec.ts

@@ -10,32 +10,32 @@ describe('behavior drag node', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
 
     graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node-4' } });
     graph.emit(`node:${CommonEvent.DRAG}`, { dx: 20, dy: 20 });
     graph.emit(`node:${CommonEvent.DRAG_END}`);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-drag');
+    await expect(graph).toMatchSnapshot(__filename, 'after-drag');
   });
 
   it('hide edges', async () => {
     graph.setBehaviors([{ type: 'drag-node', hideEdges: 'both' }]);
     graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node-4' } });
     graph.emit(`node:${CommonEvent.DRAG}`, { dx: 20, dy: 20 });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hideEdges-both');
+    await expect(graph).toMatchSnapshot(__filename, 'hideEdges-both');
     graph.emit(`node:${CommonEvent.DRAG_END}`);
 
     graph.setBehaviors([{ type: 'drag-node', hideEdges: 'in' }]);
     graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node-3' } });
     graph.emit(`node:${CommonEvent.DRAG}`, { dx: 0, dy: 20 });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hideEdges-in');
+    await expect(graph).toMatchSnapshot(__filename, 'hideEdges-in');
     graph.emit(`node:${CommonEvent.DRAG_END}`);
 
     graph.setBehaviors([{ type: 'drag-node', hideEdges: 'out' }]);
     graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node-3' } });
     graph.emit(`node:${CommonEvent.DRAG}`, { dx: 0, dy: 20 });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hideEdges-out');
+    await expect(graph).toMatchSnapshot(__filename, 'hideEdges-out');
     graph.emit(`node:${CommonEvent.DRAG_END}`);
   });
 
@@ -43,8 +43,8 @@ describe('behavior drag node', () => {
     graph.setBehaviors([{ type: 'drag-node', shadow: true, shadowStroke: 'red', shadowStrokeOpacity: 1 }]);
     graph.emit(`node:${CommonEvent.DRAG_START}`, { target: { id: 'node-4' } });
     graph.emit(`node:${CommonEvent.DRAG}`, { dx: 20, dy: 20 });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__shadow');
+    await expect(graph).toMatchSnapshot(__filename, 'shadow');
     graph.emit(`node:${CommonEvent.DRAG_END}`);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__shadow-after-drag');
+    await expect(graph).toMatchSnapshot(__filename, 'shadow-after-drag');
   });
 });

packages/g6/__tests__/unit/behaviors/behavior-zoom-canvas.spec.ts

@@ -21,7 +21,7 @@ describe('behavior zoom canvas', () => {
 
     expect(graph.getZoom()).toBe(2);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('zoom out', () => {

packages/g6/__tests__/unit/elements/change-type.spec.ts

@@ -10,7 +10,7 @@ describe('element change type', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('change type', async () => {
@@ -21,6 +21,6 @@ describe('element change type', () => {
 
     await graph.draw();
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__change_type');
+    await expect(graph).toMatchSnapshot(__filename, 'change_type');
   });
 });

packages/g6/__tests__/unit/elements/combo.spec.ts

@@ -10,7 +10,7 @@ describe('combo', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('collapse circle combo', async () => {
@@ -41,30 +41,30 @@ describe('combo', () => {
       graph.render();
     };
     collapseCombo('top');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_top');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-top');
     expandCombo();
     collapseCombo('right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_right');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-right');
     collapseCombo('left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_left');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-left');
     expandCombo();
     collapseCombo('bottom');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_bottom');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-bottom');
     expandCombo();
     collapseCombo('center');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_center');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-center');
     expandCombo();
     collapseCombo('top-left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_topLeft');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-topLeft');
     expandCombo();
     collapseCombo('top-right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_topRight');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-topRight');
     expandCombo();
     collapseCombo('bottom-left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_bottomLeft');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-bottomLeft');
     expandCombo();
     collapseCombo('bottom-right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__collapse_bottomRight');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-collapse-bottomRight');
     expandCombo();
   });
 
@@ -98,30 +98,30 @@ describe('combo', () => {
       graph.render();
     };
     collapseCombo('top');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_top');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-top');
     expandCombo();
     collapseCombo('right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_right');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-right');
     collapseCombo('left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_left');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-left');
     expandCombo();
     collapseCombo('bottom');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_bottom');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-bottom');
     expandCombo();
     collapseCombo('center');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_center');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-center');
     expandCombo();
     collapseCombo('top-left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_topLeft');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-topLeft');
     expandCombo();
     collapseCombo('top-right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_topRight');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-topRight');
     expandCombo();
     collapseCombo('bottom-left');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_bottomLeft');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-bottomLeft');
     expandCombo();
     collapseCombo('bottom-right');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_rect__collapse_bottomRight');
+    await expect(graph).toMatchSnapshot(__filename, 'rect-collapse-bottomRight');
     expandCombo();
   });
 
@@ -154,15 +154,15 @@ describe('combo', () => {
       graph.render();
     };
     collapseCombo('child-count');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_childCount');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-marker-childCount');
     expandCombo();
     collapseCombo('descendant-count');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_descendantCount');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-marker-descendantCount');
     expandCombo();
     collapseCombo('node-count');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_nodeCount');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-marker-nodeCount');
     expandCombo();
     collapseCombo((children: any) => children.length.toString() + 'nodes');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}_circle__marker_custom');
+    await expect(graph).toMatchSnapshot(__filename, 'circle-marker-custom');
   });
 });

packages/g6/__tests__/unit/elements/position.spec.ts

@@ -10,7 +10,7 @@ describe('element position', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('translateElementTo', async () => {
@@ -19,7 +19,7 @@ describe('element position', () => {
       'node-2': [125, 100],
       'node-3': [125, 100],
     });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__translateElementTo');
+    await expect(graph).toMatchSnapshot(__filename, 'translateElementTo');
   });
 
   it('translateElementBy', async () => {
@@ -28,16 +28,16 @@ describe('element position', () => {
       'node-2': [+50, -50],
       'node-3': [0, +50],
     });
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__translateElementBy');
+    await expect(graph).toMatchSnapshot(__filename, 'translateElementBy');
   });
 
   it('translateElementTo single api', async () => {
     graph.translateElementTo('node-1', [50, 50]);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__translateElementTo-single');
+    await expect(graph).toMatchSnapshot(__filename, 'translateElementTo-single');
   });
 
   it('translateElementBy single api', async () => {
     graph.translateElementBy('node-1', [50, 50]);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__translateElementBy-single');
+    await expect(graph).toMatchSnapshot(__filename, 'translateElementBy-single');
   });
 });

packages/g6/__tests__/unit/elements/state.spec.ts

@@ -10,7 +10,7 @@ describe('element state', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('set state', async () => {
@@ -21,14 +21,14 @@ describe('element state', () => {
       'edge-2': ['active'],
     });
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__setState');
+    await expect(graph).toMatchSnapshot(__filename, 'setState');
   });
 
   it('set state single api', async () => {
     graph.setElementState('node-1', ['selected']);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__setState-single');
+    await expect(graph).toMatchSnapshot(__filename, 'setState-single');
 
     graph.setElementState('node-1', []);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__setState-single-default');
+    await expect(graph).toMatchSnapshot(__filename, 'setState-single-default');
   });
 });

packages/g6/__tests__/unit/elements/visibility.spec.ts

@@ -10,19 +10,19 @@ describe('element visibility', () => {
   });
 
   it('default status', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 
   it('hide', async () => {
     await graph.hideElement(['node-1', 'node-2', 'node-3', 'edge-1', 'edge-2', 'edge-3']);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hide');
+    await expect(graph).toMatchSnapshot(__filename, 'hide');
   });
 
   it('show', async () => {
     await graph.showElement(['node-1', 'node-2', 'edge-1']);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__show');
+    await expect(graph).toMatchSnapshot(__filename, 'show');
   });
 
   it('show and hide', async () => {
@@ -33,14 +33,14 @@ describe('element visibility', () => {
       'edge-2': 'visible',
     });
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__show-and-hide');
+    await expect(graph).toMatchSnapshot(__filename, 'show-and-hide');
   });
 
   it('show and hide single api', async () => {
     graph.setElementVisibility('node-1', 'visible');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__show-single');
+    await expect(graph).toMatchSnapshot(__filename, 'show-single');
 
     graph.setElementVisibility('node-1', 'hidden');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hide-single');
+    await expect(graph).toMatchSnapshot(__filename, 'hide-single');
   });
 });

packages/g6/__tests__/unit/layouts/grid.spec.ts

@@ -14,11 +14,11 @@ describe('grid', () => {
   });
 
   it('sortBy default', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__sortby_default');
+    await expect(graph).toMatchSnapshot(__filename, 'sortby_default');
   });
 
   it('sortBy id', async () => {
     graph.setLayout({ type: 'grid', sortBy: 'id' }), await graph.layout();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__sortby_id');
+    await expect(graph).toMatchSnapshot(__filename, 'sortby_id');
   });
 });

packages/g6/__tests__/unit/layouts/mds.spec.ts

@@ -14,6 +14,6 @@ describe('mds', () => {
   });
 
   it('mds linkDistance = 100', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__ld100');
+    await expect(graph).toMatchSnapshot(__filename, 'ld100');
   });
 });

packages/g6/__tests__/unit/runtime/element.spec.ts

@@ -13,7 +13,7 @@ describe('ElementController', () => {
   });
 
   it('static', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
 
     // @ts-expect-error context is private.
     const elementController = graph.context.element!;

packages/g6/__tests__/unit/runtime/element/visibility.spec.ts

@@ -20,7 +20,7 @@ describe('element visibility', () => {
     expect(graph.getElementVisibility('node-2-node-3')).toBe('hidden');
     expect(graph.getElementVisibility('node-3-node-1')).toBe('hidden');
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__hidden');
+    await expect(graph).toMatchSnapshot(__filename, 'hidden');
   });
 
   it('show', async () => {
@@ -30,6 +30,6 @@ describe('element visibility', () => {
     expect(graph.getElementVisibility('node-2-node-3')).toBe('visible');
     expect(graph.getElementVisibility('node-3-node-1')).toBe('visible');
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__visible');
+    await expect(graph).toMatchSnapshot(__filename, 'visible');
   });
 });

packages/g6/__tests__/unit/runtime/element/z-index.spec.ts

@@ -16,18 +16,18 @@ describe('element z-index', () => {
   it('front', async () => {
     graph.frontElement('node-2');
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__front');
+    await expect(graph).toMatchSnapshot(__filename, 'front');
   });
 
   it('back', async () => {
     graph.backElement('node-2');
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__back');
+    await expect(graph).toMatchSnapshot(__filename, 'back');
   });
 
   it('to', async () => {
     graph.setElementZIndex({ 'node-2': 0 });
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename);
+    await expect(graph).toMatchSnapshot(__filename);
   });
 });

packages/g6/__tests__/unit/runtime/graph/graph.spec.ts

@@ -140,9 +140,9 @@ describe('Graph', () => {
   });
 
   it('draw', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__before-draw');
+    await expect(graph).toMatchSnapshot(__filename, 'before-draw');
     await graph.draw();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-draw');
+    await expect(graph).toMatchSnapshot(__filename, 'after-draw');
     expect(graph.getElementRenderStyle('node-1')).toBeDefined();
   });
 
@@ -213,9 +213,9 @@ describe('Graph', () => {
   });
 
   it('layout', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__before-layout');
+    await expect(graph).toMatchSnapshot(__filename, 'before-layout');
     await graph.layout();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-layout');
+    await expect(graph).toMatchSnapshot(__filename, 'after-layout');
     expect(graph.getElementPosition('node-1')).toBeDefined();
   });
 
@@ -223,7 +223,7 @@ describe('Graph', () => {
     const [px, py] = graph.getPosition();
     graph.translateBy([100, 100]);
     expect(graph.getPosition()).toBeCloseTo([px + 100, py + 100]);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-translate');
+    await expect(graph).toMatchSnapshot(__filename, 'after-translate');
     graph.translateTo([0, 0]);
     expect(graph.getPosition()).toBeCloseTo([px, py]);
   });
@@ -233,7 +233,7 @@ describe('Graph', () => {
     expect(zoom).toBeCloseTo(1);
     graph.zoomTo(2);
     expect(graph.getZoom()).toBeCloseTo(2);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-zoom-2');
+    await expect(graph).toMatchSnapshot(__filename, 'after-zoom-2');
     graph.zoomBy(0.5);
     expect(graph.getZoom()).toBeCloseTo(1);
   });
@@ -243,7 +243,7 @@ describe('Graph', () => {
     expect(rotate).toBeCloseTo(0);
     graph.rotateTo(90);
     expect(graph.getRotation()).toBeCloseTo(90);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-rotate-90');
+    await expect(graph).toMatchSnapshot(__filename, 'after-rotate-90');
     graph.rotateBy(-90);
     expect(graph.getRotation()).toBeCloseTo(0);
   });
@@ -251,7 +251,7 @@ describe('Graph', () => {
   it('translateElementTo/translateElementBy', async () => {
     const [px, py] = graph.getElementPosition('node-1');
     graph.translateElementBy({ 'node-1': [100, 100] }, false);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__after-translate-node-1');
+    await expect(graph).toMatchSnapshot(__filename, 'after-translate-node-1');
     expect(graph.getElementPosition('node-1')).toBeCloseTo([px + 100, py + 100, 0]);
     graph.translateElementTo({ 'node-1': [px, py] }, false);
     expect(graph.getElementPosition('node-1')).toBeCloseTo([px, py, 0]);

packages/g6/__tests__/unit/runtime/viewport.spec.ts

@@ -25,12 +25,12 @@ describe('ViewportController', () => {
     await graph.zoomBy(0.5);
     expect(graph.getZoom()).toBe(0.5);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__zoom-0.5');
+    await expect(graph).toMatchSnapshot(__filename, 'zoom-0.5');
 
     await graph.zoomBy(4, { duration: 100 });
     expect(graph.getZoom()).toBe(2);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__zoom-2');
+    await expect(graph).toMatchSnapshot(__filename, 'zoom-2');
 
     await graph.zoomTo(1);
     expect(graph.getZoom()).toBe(1);
@@ -48,7 +48,7 @@ describe('ViewportController', () => {
 
     expect(graph.getPosition()).toBeCloseTo([200, 200]);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__translate');
+    await expect(graph).toMatchSnapshot(__filename, 'translate');
 
     await graph.translateTo([0, 0], { duration: 100 });
   });
@@ -59,12 +59,12 @@ describe('ViewportController', () => {
 
     await graph.rotateBy(90);
     expect(graph.getRotation()).toBe(45 + 90);
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__rotate-135');
+    await expect(graph).toMatchSnapshot(__filename, 'rotate-135');
 
     await graph.rotateTo(90, { duration: 100 });
     expect(graph.getRotation()).toBe(90);
 
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__rotate-90');
+    await expect(graph).toMatchSnapshot(__filename, 'rotate-90');
 
     await graph.rotateTo(0);
   });
@@ -117,32 +117,32 @@ describe('Viewport Fit without Animation', () => {
   });
 
   it('default', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__before-fit');
+    await expect(graph).toMatchSnapshot(__filename, 'before-fit');
   });
 
   it('focusElement', async () => {
     await graph.focusElement('1');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__focusElement');
+    await expect(graph).toMatchSnapshot(__filename, 'focusElement');
   });
 
   it('fitCenter', async () => {
     await graph.fitCenter();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__fitCenter');
+    await expect(graph).toMatchSnapshot(__filename, 'fitCenter');
   });
 
   it('fitView', async () => {
     await graph.fitView();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__fitView');
+    await expect(graph).toMatchSnapshot(__filename, 'fitView');
   });
 
   it('re focusElement', async () => {
     await graph.focusElement('1');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__re-focusElement');
+    await expect(graph).toMatchSnapshot(__filename, 're-focusElement');
   });
 
   it('re fitCenter', async () => {
     await graph.fitCenter();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__re-fitCenter');
+    await expect(graph).toMatchSnapshot(__filename, 're-fitCenter');
   });
 
   afterAll(() => {
@@ -157,32 +157,32 @@ describe('Viewport Fit with Animation', () => {
   });
 
   it('default', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__before-fit-animation');
+    await expect(graph).toMatchSnapshot(__filename, 'before-fit-animation');
   });
 
   it('focusElement', async () => {
     await graph.focusElement('1');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__focusElement-animation');
+    await expect(graph).toMatchSnapshot(__filename, 'focusElement-animation');
   });
 
   it('fitCenter', async () => {
     await graph.fitCenter();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__fitCenter-animation');
+    await expect(graph).toMatchSnapshot(__filename, 'fitCenter-animation');
   });
 
   it('fitView', async () => {
     await graph.fitView();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__fitView-animation');
+    await expect(graph).toMatchSnapshot(__filename, 'fitView-animation');
   });
 
   it('re focusElement', async () => {
     await graph.focusElement('1');
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__re-focusElement-animation');
+    await expect(graph).toMatchSnapshot(__filename, 're-focusElement-animation');
   });
 
   it('re fitCenter', async () => {
     await graph.fitCenter();
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__re-fitCenter-animation');
+    await expect(graph).toMatchSnapshot(__filename, 're-fitCenter-animation');
   });
 
   afterAll(() => {
@@ -200,7 +200,7 @@ describe('Viewport Fit with AutoFit and Padding without Animation', () => {
   });
 
   it('default', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__auto-fit-with-padding');
+    await expect(graph).toMatchSnapshot(__filename, 'auto-fit-with-padding');
   });
 });
 
@@ -215,6 +215,6 @@ describe('Viewport Fit with AutoFit and Padding with Animation', () => {
   });
 
   it('default', async () => {
-    await expect(graph.getCanvas()).toMatchSnapshot(__filename, '{name}__auto-fit-with-padding-animation');
+    await expect(graph).toMatchSnapshot(__filename, 'auto-fit-with-padding-animation');
   });
 });