From e7f187a5f623191e4fbd7f7a491ae2ff7743acdb Mon Sep 17 00:00:00 2001
From: Matthias Lehner <ga59bip@tum.de>
Date: Sat, 7 Oct 2023 14:47:56 +0200
Subject: [PATCH] Add snapshot test vor all new bpmn components

---
 .../bpmn/bpmn-end-event/bpmn-end-event.ts     |  2 +-
 .../bpmn-flow-component.tsx}                  |  6 +-
 .../bpmn-flow-update.tsx}                     |  9 ++-
 .../bpmn-flow.ts}                             | 11 ++-
 .../bpmn-intermediate-event.ts                |  2 +-
 .../bpmn/bpmn-start-event/bpmn-start-event.ts |  2 +-
 src/main/packages/bpmn/index.ts               |  4 +-
 src/main/packages/components.ts               | 12 ++--
 src/main/packages/popups.ts                   |  8 +--
 src/main/packages/uml-relationship-type.ts    |  2 +-
 src/main/packages/uml-relationships.ts        |  4 +-
 .../bpmn-annotation-component-test.tsx.snap   | 43 ++++++++++++
 .../bpmn-annotation-component-test.tsx        | 24 +++++++
 ...bpmn-call-activity-component-test.tsx.snap | 38 ++++++++++
 .../bpmn-call-activity-component-test.tsx     | 26 +++++++
 .../bpmn-conversation-component-test.tsx.snap | 34 +++++++++
 .../bpmn-conversation-component-test.tsx      | 26 +++++++
 .../bpmn-end-event-component-test.tsx.snap    | 36 ++++++++++
 .../bpmn-end-event-component-test.tsx         | 26 +++++++
 .../bpmn-flow-component-test.tsx.snap         | 69 +++++++++++++++++++
 .../bpmn-flow/bpmn-flow-component-test.tsx    | 26 +++++++
 .../bpmn-gateway-component-test.tsx.snap      | 47 +++++++++++++
 .../bpmn-gateway-component-test.tsx           | 26 +++++++
 ...intermediate-event-component-test.tsx.snap | 43 ++++++++++++
 ...bpmn-intermediate-event-component-test.tsx | 26 +++++++
 .../bpmn-start-event-component-test.tsx.snap  | 35 ++++++++++
 .../bpmn-start-event-component-test.tsx       | 26 +++++++
 .../bpmn-subprocess-component-test.tsx.snap   | 38 ++++++++++
 .../bpmn-subprocess-component-test.tsx        | 26 +++++++
 .../bpmn-task-component-test.tsx.snap         | 37 ++++++++++
 .../bpmn-task/bpmn-task-component-test.tsx    | 26 +++++++
 .../bpmn-transaction-component-test.tsx.snap  | 48 +++++++++++++
 .../bpmn-transaction-component-test.tsx       | 26 +++++++
 33 files changed, 782 insertions(+), 32 deletions(-)
 rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow-component.tsx => bpmn-flow/bpmn-flow-component.tsx} (94%)
 rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow-update.tsx => bpmn-flow/bpmn-flow-update.tsx} (92%)
 rename src/main/packages/bpmn/{bpmn-squence-flow/bpmn-sequence-flow.ts => bpmn-flow/bpmn-flow.ts} (74%)
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap
 create mode 100644 src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx

diff --git a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts
index 028b99de..7318cfcf 100644
--- a/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts
+++ b/src/main/packages/bpmn/bpmn-end-event/bpmn-end-event.ts
@@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary';
 import { UMLElementType } from '../../uml-element-type';
 
 export class BPMNEndEvent extends UMLElement {
-  static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow];
+  static supportedRelationships = [BPMNRelationshipType.BPMNFlow];
   static features: UMLElementFeatures = { ...UMLElement.features, resizable: false };
 
   type: UMLElementType = BPMNElementType.BPMNEndEvent;
diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx
similarity index 94%
rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx
rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx
index 3d9e48ad..9c7d6659 100644
--- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-component.tsx
+++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-component.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent } from 'react';
 import { Point } from '../../../utils/geometry/point';
-import { BPMNSequenceFlow } from './bpmn-sequence-flow';
+import { BPMNFlow } from './bpmn-flow';
 import { ThemedCircle, ThemedPath, ThemedPolyline } from '../../../components/theme/themedComponents';
 
-export const BPMNSequenceFlowComponent: FunctionComponent<Props> = ({ element }) => {
+export const BPMNFlowComponent: FunctionComponent<Props> = ({ element }) => {
   let position = { x: 0, y: 0 };
   let direction: 'vertical' | 'horizontal' = 'vertical';
   const path = element.path.map((point) => new Point(point.x, point.y));
@@ -86,5 +86,5 @@ export const BPMNSequenceFlowComponent: FunctionComponent<Props> = ({ element })
 };
 
 interface Props {
-  element: BPMNSequenceFlow;
+  element: BPMNFlow;
 }
diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx
similarity index 92%
rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx
rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx
index dae268c4..56156f50 100644
--- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow-update.tsx
+++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow-update.tsx
@@ -11,15 +11,14 @@ import { styled } from '../../../components/theme/styles';
 import { UMLElementRepository } from '../../../services/uml-element/uml-element-repository';
 import { ExchangeIcon } from '../../../components/controls/icon/exchange';
 import { UMLRelationshipRepository } from '../../../services/uml-relationship/uml-relationship-repository';
-import { BPMNFlowType, BPMNSequenceFlow } from './bpmn-sequence-flow';
+import { BPMNFlowType, BPMNFlow } from './bpmn-flow';
 import { ColorButton } from '../../../components/controls/color-button/color-button';
 import { StylePane } from '../../../components/style-pane/style-pane';
 import { Dropdown } from '../../../components/controls/dropdown/dropdown';
-import { BPMNFlow } from '../../../typings';
 import { Divider } from '../../../components/controls/divider/divider';
 
 interface OwnProps {
-  element: BPMNSequenceFlow;
+  element: BPMNFlow;
 }
 
 type StateProps = {};
@@ -49,7 +48,7 @@ const Flex = styled.div`
 
 type State = { colorOpen: boolean };
 
-class BPMNSequenceFlowUpdateComponent extends Component<Props, State> {
+class BPMNFlowUpdateComponent extends Component<Props, State> {
   state = { colorOpen: false };
 
   private toggleColor = () => {
@@ -113,4 +112,4 @@ class BPMNSequenceFlowUpdateComponent extends Component<Props, State> {
   };
 }
 
-export const BPMNSequenceFlowUpdate = enhance(BPMNSequenceFlowUpdateComponent);
+export const BPMNFlowUpdate = enhance(BPMNFlowUpdateComponent);
diff --git a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts
similarity index 74%
rename from src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts
rename to src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts
index fa6d2925..57a6ce20 100644
--- a/src/main/packages/bpmn/bpmn-squence-flow/bpmn-sequence-flow.ts
+++ b/src/main/packages/bpmn/bpmn-flow/bpmn-flow.ts
@@ -4,23 +4,22 @@ import { DeepPartial } from 'redux';
 import { UMLRelationshipCenteredDescription } from '../../../services/uml-relationship/uml-relationship-centered-description';
 import { UMLElement } from '../../../services/uml-element/uml-element';
 import * as Apollon from '../../../typings';
-import { BPMNFlow } from '../../../typings';
 
 export type BPMNFlowType = 'sequence' | 'message' | 'association';
 
-export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription {
+export class BPMNFlow extends UMLRelationshipCenteredDescription {
   static features = { ...UMLRelationship.features };
   static defaultFlowType: BPMNFlowType = 'sequence';
 
-  type = BPMNRelationshipType.BPMNSequenceFlow;
+  type = BPMNRelationshipType.BPMNFlow;
   name = '';
 
   flowType: BPMNFlowType;
 
-  constructor(values?: DeepPartial<BPMNFlow>) {
+  constructor(values?: DeepPartial<Apollon.BPMNFlow>) {
     super(values);
     this.name = values?.name || this.name;
-    this.flowType = values?.flowType || BPMNSequenceFlow.defaultFlowType;
+    this.flowType = values?.flowType || BPMNFlow.defaultFlowType;
   }
 
   serialize(children?: UMLElement[]): Apollon.BPMNFlow {
@@ -36,6 +35,6 @@ export class BPMNSequenceFlow extends UMLRelationshipCenteredDescription {
     children?: Apollon.UMLModelElement[],
   ) {
     super.deserialize(values, children);
-    this.flowType = values.flowType || BPMNSequenceFlow.defaultFlowType;
+    this.flowType = values.flowType || BPMNFlow.defaultFlowType;
   }
 }
diff --git a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts
index 4bfd1097..b375dfea 100644
--- a/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts
+++ b/src/main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event.ts
@@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary';
 import { UMLElementType } from '../../uml-element-type';
 
 export class BPMNIntermediateEvent extends UMLElement {
-  static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow];
+  static supportedRelationships = [BPMNRelationshipType.BPMNFlow];
   static features: UMLElementFeatures = { ...UMLElement.features, resizable: false };
 
   type: UMLElementType = BPMNElementType.BPMNIntermediateEvent;
diff --git a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts
index 0ba007d4..9c1aa60f 100644
--- a/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts
+++ b/src/main/packages/bpmn/bpmn-start-event/bpmn-start-event.ts
@@ -9,7 +9,7 @@ import { IBoundary } from '../../../utils/geometry/boundary';
 import { UMLElementType } from '../../uml-element-type';
 
 export class BPMNStartEvent extends UMLElement {
-  static supportedRelationships = [BPMNRelationshipType.BPMNSequenceFlow];
+  static supportedRelationships = [BPMNRelationshipType.BPMNFlow];
   static features: UMLElementFeatures = { ...UMLElement.features, resizable: false };
 
   type: UMLElementType = BPMNElementType.BPMNStartEvent;
diff --git a/src/main/packages/bpmn/index.ts b/src/main/packages/bpmn/index.ts
index adf05a11..561b8149 100644
--- a/src/main/packages/bpmn/index.ts
+++ b/src/main/packages/bpmn/index.ts
@@ -1,4 +1,4 @@
-import { BPMNSequenceFlow } from './bpmn-squence-flow/bpmn-sequence-flow';
+import { BPMNFlow } from './bpmn-flow/bpmn-flow';
 
 export const BPMNElementType = {
   BPMNTask: 'BPMNTask',
@@ -14,5 +14,5 @@ export const BPMNElementType = {
 } as const;
 
 export const BPMNRelationshipType = {
-  BPMNSequenceFlow: 'BPMNSequenceFlow',
+  BPMNFlow: 'BPMNFlow',
 } as const;
diff --git a/src/main/packages/components.ts b/src/main/packages/components.ts
index 12955263..22526bd9 100644
--- a/src/main/packages/components.ts
+++ b/src/main/packages/components.ts
@@ -47,17 +47,17 @@ import { FlowchartDecisionComponent } from './flowchart/flowchart-decision/flowc
 import { FlowchartFunctionCallComponent } from './flowchart/flowchart-function-call/flowchart-function-call-component';
 import { FlowchartInputOutputComponent } from './flowchart/flowchart-input-output/flowchart-input-output-component';
 import { ColorLegendComponent } from './common/color-legend/color-legend-component';
-import { BPMNSequenceFlowComponent } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-component';
+import { BPMNFlowComponent } from './bpmn/bpmn-flow/bpmn-flow-component';
 import { BPMNTaskComponent } from './bpmn/bpmn-task/bpmn-task-component';
 import { BPMNSubprocessComponent } from './bpmn/bpmn-subprocess/bpmn-subprocess-component';
 import { BPMNStartEventComponent } from './bpmn/bpmn-start-event/bpmn-start-event-component';
 import { BPMNIntermediateEventComponent } from './bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component';
 import { BPMNEndEventComponent } from './bpmn/bpmn-end-event/bpmn-end-event-component';
 import { BPMNGatewayComponent } from './bpmn/bpmn-gateway/bpmn-gateway-component';
-import {BPMNTransactionComponent} from './bpmn/bpmn-transaction/bpmn-transaction-component';
-import {BPMNCallActivityComponent} from './bpmn/bpmn-call-activity/bpmn-call-activity-component';
-import {BPMNAnnotationComponent} from './bpmn/bpmn-annotation/bpmn-annotation-component';
-import {BPMNConversationComponent} from './bpmn/bpmn-conversation/bpmn-conversation-component';
+import { BPMNTransactionComponent } from './bpmn/bpmn-transaction/bpmn-transaction-component';
+import { BPMNCallActivityComponent } from './bpmn/bpmn-call-activity/bpmn-call-activity-component';
+import { BPMNAnnotationComponent } from './bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNConversationComponent } from './bpmn/bpmn-conversation/bpmn-conversation-component';
 
 export const Components: {
   [key in UMLElementType | UMLRelationshipType]:
@@ -138,5 +138,5 @@ export const Components: {
   [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcComponent,
   [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLinkComponent,
   [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineComponent,
-  [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowComponent,
+  [UMLRelationshipType.BPMNFlow]: BPMNFlowComponent,
 };
diff --git a/src/main/packages/popups.ts b/src/main/packages/popups.ts
index f33e514b..d8269d9d 100644
--- a/src/main/packages/popups.ts
+++ b/src/main/packages/popups.ts
@@ -26,9 +26,9 @@ import { FlowchartFunctionCallUpdate } from './flowchart/flowchart-function-call
 import { FlowchartInputOutputUpdate } from './flowchart/flowchart-input-output/flowchart-input-output-update';
 import { FlowchartFlowlineUpdate } from './flowchart/flowchart-flowline/flowchart-flowline-update';
 import { ColorLegendUpdate } from './common/color-legend/color-legend-update';
-import { BPMNSequenceFlowUpdate } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow-update';
-import {BPMNGatewayUpdate} from './bpmn/bpmn-gateway/bpmn-gateway-update';
-import {BPMNConversationUpdate} from './bpmn/bpmn-conversation/bpmn-conversation-update';
+import { BPMNFlowUpdate } from './bpmn/bpmn-flow/bpmn-flow-update';
+import { BPMNGatewayUpdate } from './bpmn/bpmn-gateway/bpmn-gateway-update';
+import { BPMNConversationUpdate } from './bpmn/bpmn-conversation/bpmn-conversation-update';
 
 export type Popups = { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null };
 export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentType<{ element: any }> | null } = {
@@ -108,5 +108,5 @@ export const Popups: { [key in UMLElementType | UMLRelationshipType]: ComponentT
   [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArcUpdate,
   [UMLRelationshipType.SyntaxTreeLink]: DefaultRelationshipPopup,
   [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowlineUpdate,
-  [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlowUpdate,
+  [UMLRelationshipType.BPMNFlow]: BPMNFlowUpdate,
 };
diff --git a/src/main/packages/uml-relationship-type.ts b/src/main/packages/uml-relationship-type.ts
index f3ec5ece..555e7811 100644
--- a/src/main/packages/uml-relationship-type.ts
+++ b/src/main/packages/uml-relationship-type.ts
@@ -53,5 +53,5 @@ export const DefaultUMLRelationshipType: { [key in UMLDiagramType]: UMLRelations
   [UMLDiagramType.ReachabilityGraph]: ReachabilityGraphRelationshipType.ReachabilityGraphArc,
   [UMLDiagramType.SyntaxTree]: SyntaxTreeRelationshipType.SyntaxTreeLink,
   [UMLDiagramType.Flowchart]: FlowchartRelationshipType.FlowchartFlowline,
-  [UMLDiagramType.BPMN]: BPMNRelationshipType.BPMNSequenceFlow,
+  [UMLDiagramType.BPMN]: BPMNRelationshipType.BPMNFlow,
 };
diff --git a/src/main/packages/uml-relationships.ts b/src/main/packages/uml-relationships.ts
index 71e1edf8..18e9fecd 100644
--- a/src/main/packages/uml-relationships.ts
+++ b/src/main/packages/uml-relationships.ts
@@ -25,7 +25,7 @@ import { UMLPetriNetArc } from './uml-petri-net/uml-petri-net-arc/uml-petri-net-
 import { UMLReachabilityGraphArc } from './uml-reachability-graph/uml-reachability-graph-arc/uml-reachability-graph-arc';
 import { SyntaxTreeLink } from './syntax-tree/syntax-tree-link/syntax-tree-link';
 import { FlowchartFlowline } from './flowchart/flowchart-flowline/flowchart-flowline';
-import { BPMNSequenceFlow } from './bpmn/bpmn-squence-flow/bpmn-sequence-flow';
+import { BPMNFlow } from './bpmn/bpmn-flow/bpmn-flow';
 
 type UMLRelationships = { [key in UMLRelationshipType]: new (values?: IUMLRelationship) => UMLRelationship };
 
@@ -55,5 +55,5 @@ export const UMLRelationships = {
   [UMLRelationshipType.ReachabilityGraphArc]: UMLReachabilityGraphArc,
   [UMLRelationshipType.SyntaxTreeLink]: SyntaxTreeLink,
   [UMLRelationshipType.FlowchartFlowline]: FlowchartFlowline,
-  [UMLRelationshipType.BPMNSequenceFlow]: BPMNSequenceFlow,
+  [UMLRelationshipType.BPMNFlow]: BPMNFlow,
 };
diff --git a/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap
new file mode 100644
index 00000000..15dbc7af
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-annotation/__snapshots__/bpmn-annotation-component-test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-annotation-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <rect
+          class="sc-fqkvVR joPxif"
+          fill="transparent"
+          height="100"
+          rx="10"
+          ry="10"
+          stroke="transparent"
+          width="200"
+        />
+        <path
+          class="sc-gEvEer JpXgg"
+          d="M20,0 L10,0 A 10 10 280 0 0 0 10 L0,90 A 10 10 180 0 0 10 100 L20, 100"
+          fill="transparent"
+          stroke="black"
+        />
+        <text
+          font-weight="bold"
+          height="100"
+          pointer-events="none"
+          text-anchor="middle"
+          width="200"
+          x="100"
+          y="50"
+        >
+          <tspan
+            dy="5.5"
+            x="100"
+          >
+            Annotation
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx
new file mode 100644
index 00000000..3b147d68
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-annotation/bpmn-annotation-component-test.tsx
@@ -0,0 +1,24 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-annotation-component', () => {
+  const annotation: BPMNAnnotation = new BPMNAnnotation({ name: 'Annotation' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNAnnotationComponent element={annotation} />
+    </svg>,
+  );
+  expect(getByText(annotation.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap
new file mode 100644
index 00000000..f4aba5d8
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-call-activity/__snapshots__/bpmn-call-activity-component-test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-call-activity-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <rect
+          class="sc-fqkvVR kprGcp"
+          fill="white"
+          height="100"
+          rx="10"
+          ry="10"
+          stroke="black"
+          stroke-width="3"
+          width="200"
+        />
+        <text
+          font-weight="bold"
+          height="100"
+          pointer-events="none"
+          text-anchor="middle"
+          width="200"
+          x="100"
+          y="50"
+        >
+          <tspan
+            dy="5.5"
+            x="100"
+          >
+            Call Activity
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx
new file mode 100644
index 00000000..f5380daa
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNCallActivity } from '../../../../../main/packages/bpmn/bpmn-call-activity/bpmn-call-activity';
+import { BPMNCallActivityComponent } from '../../../../../main/packages/bpmn/bpmn-call-activity/bpmn-call-activity-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-call-activity-component', () => {
+  const callActivity: BPMNCallActivity = new BPMNCallActivity({ name: 'Call Activity' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNCallActivityComponent element={callActivity} />
+    </svg>,
+  );
+  expect(getByText(callActivity.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap
new file mode 100644
index 00000000..cfc3bbfe
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-conversation/__snapshots__/bpmn-conversation-component-test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-conversation-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <polyline
+          class="sc-aXZVg bUvEJV"
+          fill="white"
+          points="10 0, 30 0, 40 20, 30 40, 10 40, 0 20, 10 0"
+          stroke="black"
+          stroke-width="1"
+        />
+        <text
+          height="40"
+          pointer-events="none"
+          text-anchor="start"
+          width="40"
+          x="50"
+          y="20"
+        >
+          <tspan
+            dy="5.5"
+            x="50"
+          >
+            Conversation
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx
new file mode 100644
index 00000000..c8ea06c9
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-conversation/bpmn-conversation-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNConversationComponent } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation-component';
+import { BPMNConversation } from '../../../../../main/packages/bpmn/bpmn-conversation/bpmn-conversation';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-conversation-component', () => {
+  const conversation: BPMNConversation = new BPMNConversation({ name: 'Conversation' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNConversationComponent element={conversation} />
+    </svg>,
+  );
+  expect(getByText(conversation.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap
new file mode 100644
index 00000000..41345541
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-end-event/__snapshots__/bpmn-end-event-component-test.tsx.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-end-event-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <circle
+          class="sc-iGgWBj fvtjvB"
+          cx="50%"
+          cy="50%"
+          fill="white"
+          r="18.5"
+          stroke="black"
+          stroke-width="3"
+        />
+        <text
+          height="40"
+          pointer-events="none"
+          text-anchor="start"
+          width="40"
+          x="50"
+          y="20"
+        >
+          <tspan
+            dy="5.5"
+            x="50"
+          >
+            End
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx
new file mode 100644
index 00000000..f7b5f1b5
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-end-event/bpmn-end-event-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNEndEventComponent } from '../../../../../main/packages/bpmn/bpmn-end-event/bpmn-end-event-component';
+import { BPMNEndEvent } from '../../../../../main/packages/bpmn/bpmn-end-event/bpmn-end-event';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-end-event-component', () => {
+  const endEvent: BPMNEndEvent = new BPMNEndEvent({ name: 'End' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNEndEventComponent element={endEvent} />
+    </svg>,
+  );
+  expect(getByText(endEvent.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap
new file mode 100644
index 00000000..b04755b9
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-flow/__snapshots__/bpmn-flow-component-test.tsx.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-flow-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <marker
+          id="marker-start-1"
+          markerHeight="10"
+          markerUnits="strokeWidth"
+          markerWidth="10"
+          orient="auto"
+          refX="0"
+          refY="0"
+          viewBox="0 0 10 10"
+        >
+          <circle
+            class="sc-iGgWBj fvtjvB"
+            cx="0%"
+            cy="0%"
+            fill="white"
+            r="5"
+            stroke="black"
+            stroke-width="1"
+          />
+        </marker>
+        <marker
+          id="marker-end-1"
+          markerHeight="10"
+          markerUnits="strokeWidth"
+          markerWidth="10"
+          orient="auto"
+          refX="11"
+          refY="5"
+          viewBox="0 0 10 5"
+        >
+          <path
+            class="sc-gEvEer fpHXmb"
+            d="M0,0 L10,5 L0,10, L0,0 z"
+            fill="strokeColor"
+            fill-rule="evenodd"
+            stroke="black"
+            stroke-linejoin="round"
+          />
+        </marker>
+        <polyline
+          class="sc-aXZVg OFiXI"
+          fill="none"
+          marker-end="url(#marker-end-1)"
+          points="0 0,200 100"
+          stroke="black"
+          stroke-width="1"
+        />
+        <text
+          dominant-baseline="text-after-edge"
+          dy="-5"
+          pointer-events="none"
+          text-anchor="middle"
+          x="100"
+          y="50"
+        >
+          Sequence
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx
new file mode 100644
index 00000000..049fb22d
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-flow/bpmn-flow-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNFlow } from '../../../../../main/packages/bpmn/bpmn-flow/bpmn-flow';
+import { BPMNFlowComponent } from '../../../../../main/packages/bpmn/bpmn-flow/bpmn-flow-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-flow-component', () => {
+  const flow: BPMNFlow = new BPMNFlow({ id: '1', name: 'Sequence' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNFlowComponent element={flow} />
+    </svg>,
+  );
+  expect(getByText(flow.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap
new file mode 100644
index 00000000..d37dcf9a
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-gateway/__snapshots__/bpmn-gateway-component-test.tsx.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-gateway-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <g>
+          <polyline
+            class="sc-aXZVg bUvEJV"
+            fill="white"
+            points="20 0, 40 20, 20 40, 0 20, 20 0"
+            stroke="black"
+          />
+          <polyline
+            class="sc-aXZVg bUvEJV"
+            fill="white"
+            points="13 13, 27 27"
+            stroke="black"
+          />
+          <polyline
+            class="sc-aXZVg bUvEJV"
+            fill="white"
+            points="13 27, 27 13"
+            stroke="black"
+          />
+          <text
+            height="40"
+            pointer-events="none"
+            text-anchor="start"
+            width="40"
+            x="50"
+            y="20"
+          >
+            <tspan
+              dy="5.5"
+              x="50"
+            >
+              Gateway
+            </tspan>
+          </text>
+        </g>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx
new file mode 100644
index 00000000..6da9e308
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-gateway/bpmn-gateway-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNGateway } from '../../../../../main/packages/bpmn/bpmn-gateway/bpmn-gateway';
+import { BPMNGatewayComponent } from '../../../../../main/packages/bpmn/bpmn-gateway/bpmn-gateway-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-gateway-component', () => {
+  const gateway: BPMNGateway = new BPMNGateway({ name: 'Gateway' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNGatewayComponent element={gateway} />
+    </svg>,
+  );
+  expect(getByText(gateway.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap
new file mode 100644
index 00000000..bdbb19d4
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/__snapshots__/bpmn-intermediate-event-component-test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-intermediate-event-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <circle
+          class="sc-iGgWBj fvtjvB"
+          cx="50%"
+          cy="50%"
+          fill="white"
+          r="19.5"
+          stroke="black"
+        />
+        <circle
+          class="sc-iGgWBj fvtjvB"
+          cx="50%"
+          cy="50%"
+          fill="white"
+          r="13.5"
+          stroke="black"
+        />
+        <text
+          height="40"
+          pointer-events="none"
+          text-anchor="start"
+          width="40"
+          x="50"
+          y="20"
+        >
+          <tspan
+            dy="5.5"
+            x="50"
+          >
+            Event
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx
new file mode 100644
index 00000000..07db2576
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNIntermediateEvent } from '../../../../../main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event';
+import { BPMNIntermediateEventComponent } from '../../../../../main/packages/bpmn/bpmn-intermediate-event/bpmn-intermediate-event-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-intermediate-event-component', () => {
+  const intermediateEvent: BPMNIntermediateEvent = new BPMNIntermediateEvent({ name: 'Event' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNIntermediateEventComponent element={intermediateEvent} />
+    </svg>,
+  );
+  expect(getByText(intermediateEvent.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap
new file mode 100644
index 00000000..808137bf
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-start-event/__snapshots__/bpmn-start-event-component-test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-start-event-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <circle
+          class="sc-iGgWBj fvtjvB"
+          cx="50%"
+          cy="50%"
+          fill="white"
+          r="20"
+          stroke="black"
+        />
+        <text
+          height="40"
+          pointer-events="none"
+          text-anchor="end"
+          width="40"
+          x="-10"
+          y="20"
+        >
+          <tspan
+            dy="5.5"
+            x="-10"
+          >
+            Start
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx
new file mode 100644
index 00000000..53a1589d
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-start-event/bpmn-start-event-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNStartEvent } from '../../../../../main/packages/bpmn/bpmn-start-event/bpmn-start-event';
+import { BPMNStartEventComponent } from '../../../../../main/packages/bpmn/bpmn-start-event/bpmn-start-event-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-start-event-component', () => {
+  const startEvent: BPMNStartEvent = new BPMNStartEvent({ name: 'Start' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNStartEventComponent element={startEvent} />
+    </svg>,
+  );
+  expect(getByText(startEvent.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap
new file mode 100644
index 00000000..bf892c3c
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-subprocess/__snapshots__/bpmn-subprocess-component-test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-subprocess-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <rect
+          class="sc-fqkvVR kprGcp"
+          fill="white"
+          height="100%"
+          rx="10"
+          ry="10"
+          stroke="black"
+          stroke-dasharray="4"
+          width="100%"
+        />
+        <text
+          font-weight="bold"
+          height="100"
+          pointer-events="none"
+          text-anchor="middle"
+          width="200"
+          x="100"
+          y="50"
+        >
+          <tspan
+            dy="5.5"
+            x="100"
+          >
+            SyntaxTreeTerminal
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx
new file mode 100644
index 00000000..1d325f3e
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNSubprocess } from '../../../../../main/packages/bpmn/bpmn-subprocess/bpmn-subprocess';
+import { BPMNSubprocessComponent } from '../../../../../main/packages/bpmn/bpmn-subprocess/bpmn-subprocess-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-subprocess-component', () => {
+  const subprocess: BPMNSubprocess = new BPMNSubprocess({ name: 'SyntaxTreeTerminal' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNSubprocessComponent element={subprocess} />
+    </svg>,
+  );
+  expect(getByText(subprocess.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap
new file mode 100644
index 00000000..de09db07
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-task/__snapshots__/bpmn-task-component-test.tsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-task-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <rect
+          class="sc-fqkvVR kprGcp"
+          fill="white"
+          height="100%"
+          rx="10"
+          ry="10"
+          stroke="black"
+          width="100%"
+        />
+        <text
+          font-weight="bold"
+          height="100"
+          pointer-events="none"
+          text-anchor="middle"
+          width="200"
+          x="100"
+          y="50"
+        >
+          <tspan
+            dy="5.5"
+            x="100"
+          >
+            Task
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx
new file mode 100644
index 00000000..23883fba
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-task/bpmn-task-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNTask } from '../../../../../main/packages/bpmn/bpmn-task/bpmn-task';
+import { BPMNTaskComponent } from '../../../../../main/packages/bpmn/bpmn-task/bpmn-task-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-task-component', () => {
+  const task: BPMNTask = new BPMNTask({ name: 'Task' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNTaskComponent element={task} />
+    </svg>,
+  );
+  expect(getByText(task.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});
diff --git a/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap
new file mode 100644
index 00000000..00347048
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-transaction/__snapshots__/bpmn-transaction-component-test.tsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render the bpmn-transaction-component 1`] = `
+<body>
+  <div>
+    <svg>
+      <g>
+        <rect
+          class="sc-fqkvVR kprGcp"
+          fill="white"
+          height="100"
+          rx="10"
+          ry="10"
+          stroke="black"
+          width="200"
+        />
+        <rect
+          class="sc-fqkvVR kprGcp"
+          fill="white"
+          height="90"
+          rx="7"
+          ry="7"
+          stroke="black"
+          width="190"
+          x="5"
+          y="5"
+        />
+        <text
+          font-weight="bold"
+          height="100"
+          pointer-events="none"
+          text-anchor="middle"
+          width="200"
+          x="100"
+          y="50"
+        >
+          <tspan
+            dy="5.5"
+            x="100"
+          >
+            Transaction
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
+`;
diff --git a/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx b/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx
new file mode 100644
index 00000000..c963fb01
--- /dev/null
+++ b/src/tests/unit/packages/bpmn/bpmn-transaction/bpmn-transaction-component-test.tsx
@@ -0,0 +1,26 @@
+import { wrappedRender } from '../../../test-utils/render';
+import * as React from 'react';
+import { SyntaxTreeTerminal } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal';
+import { SyntaxTreeTerminalComponent } from '../../../../../main/packages/syntax-tree/syntax-tree-terminal/syntax-tree-terminal-component';
+import { Multiline } from '../../../../../main/utils/svg/multiline';
+import { CSSProperties } from 'react';
+import { BPMNAnnotation } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation';
+import { BPMNAnnotationComponent } from '../../../../../main/packages/bpmn/bpmn-annotation/bpmn-annotation-component';
+import { BPMNTransaction } from '../../../../../main/packages/bpmn/bpmn-transaction/bpmn-transaction';
+import { BPMNTransactionComponent } from '../../../../../main/packages/bpmn/bpmn-transaction/bpmn-transaction-component';
+
+// override getStringWidth, because it uses by jsdom unsupported SVGElement methods
+Multiline.prototype.getStringWidth = (str: string, style?: CSSProperties) => {
+  return 0;
+};
+
+it('render the bpmn-transaction-component', () => {
+  const transaction: BPMNTransaction = new BPMNTransaction({ name: 'Transaction' });
+  const { getByText, baseElement } = wrappedRender(
+    <svg>
+      <BPMNTransactionComponent element={transaction} />
+    </svg>,
+  );
+  expect(getByText(transaction.name)).toBeInTheDocument();
+  expect(baseElement).toMatchSnapshot();
+});