From 7b5ef20a58b9ba4acb2686b01ccc8ab6a781cd13 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Wed, 7 Oct 2020 18:26:51 -0500
Subject: [PATCH] [7.x] Remove APM stacktrace snapshots (#79543) (#79700)

These are not necessary and have caused problems for other contributors. Replace the snapshots with tests that check for errors or the structure of the results.

Move the test files out of the __test__ directory and rename the directory to __fixtures__.

# Conflicts:
#	x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap

* Snapshot update
---
 .../{__test__ => }/Stackframe.test.tsx        |   16 +-
 .../stacktraces.json                          |    0
 .../__snapshots__/Stackframe.test.tsx.snap    | 1632 -----------------
 .../__test__/__snapshots__/index.test.ts.snap |  468 -----
 .../index.test.ts => stacktrace.test.ts}      |   17 +-
 5 files changed, 20 insertions(+), 2113 deletions(-)
 rename x-pack/plugins/apm/public/components/shared/Stacktrace/{__test__ => }/Stackframe.test.tsx (82%)
 rename x-pack/plugins/apm/public/components/shared/Stacktrace/{__test__ => __fixtures__}/stacktraces.json (100%)
 delete mode 100644 x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
 delete mode 100644 x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/index.test.ts.snap
 rename x-pack/plugins/apm/public/components/shared/Stacktrace/{__test__/index.test.ts => stacktrace.test.ts} (90%)

diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx
similarity index 82%
rename from x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
rename to x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx
index 589b2dd27fbc4..58652b40b7084 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.test.tsx
@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { ReactWrapper, shallow } from 'enzyme';
-import { Stackframe } from '../../../../../typings/es_schemas/raw/fields/stackframe';
-import { mountWithTheme } from '../../../../utils/testHelpers';
-import { Stackframe as StackframeComponent } from '../Stackframe';
-import stacktracesMock from './stacktraces.json';
+import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
+import { mountWithTheme } from '../../../utils/testHelpers';
+import { Stackframe as StackframeComponent } from './Stackframe';
+import stacktracesMock from './__fixtures__/stacktraces.json';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
   return {
@@ -27,8 +27,12 @@ describe('Stackframe', () => {
       );
     });
 
-    it('should render correctly', () => {
-      expect(wrapper).toMatchSnapshot();
+    it('renders', () => {
+      expect(() =>
+        mountWithTheme(
+          <StackframeComponent id="test" stackframe={stacktracesMock[0]} />
+        )
+      ).not.toThrowError();
     });
 
     it('should render FrameHeading, Context and Variables', () => {
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/stacktraces.json b/x-pack/plugins/apm/public/components/shared/Stacktrace/__fixtures__/stacktraces.json
similarity index 100%
rename from x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/stacktraces.json
rename to x-pack/plugins/apm/public/components/shared/Stacktrace/__fixtures__/stacktraces.json
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
deleted file mode 100644
index 63093900cb543..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
+++ /dev/null
@@ -1,1632 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stackframe when stackframe has source lines should render correctly 1`] = `
-.c3 {
-  position: relative;
-  border-radius: 4px;
-}
-
-.c4 {
-  position: absolute;
-  width: 100%;
-  height: 18px;
-  top: 36px;
-  pointer-events: none;
-  background-color: #fef6e5;
-}
-
-.c5 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: 4px;
-  background: #f5f7fa;
-}
-
-.c6 {
-  position: relative;
-  min-width: 42px;
-  padding-left: 8px;
-  padding-right: 4px;
-  color: #98a2b3;
-  line-height: 18px;
-  text-align: right;
-  border-right: 1px solid #d3dae6;
-}
-
-.c6:last-of-type {
-  border-radius: 0 0 0 4px;
-}
-
-.c7 {
-  position: relative;
-  min-width: 42px;
-  padding-left: 8px;
-  padding-right: 4px;
-  color: #98a2b3;
-  line-height: 18px;
-  text-align: right;
-  border-right: 1px solid #d3dae6;
-  background-color: #fef6e5;
-}
-
-.c7:last-of-type {
-  border-radius: 0 0 0 4px;
-}
-
-.c8 {
-  overflow: auto;
-  margin: 0 0 0 42px;
-  padding: 0;
-  background-color: #ffffff;
-}
-
-.c8:last-of-type {
-  border-radius: 0 0 4px 0;
-}
-
-.c9 {
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 18px;
-  line-height: 18px;
-}
-
-.c10 {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-}
-
-.c0 {
-  color: #69707d;
-  line-height: 1.5;
-  padding: 2px 0;
-  font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace;
-  font-size: 14px;
-}
-
-.c1 {
-  color: #000000;
-}
-
-.c2 {
-  position: relative;
-  font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace;
-  font-size: 14px;
-  border: 1px solid #d3dae6;
-  border-radius: 4px;
-  background: #f5f7fa;
-}
-
-<Stackframe
-  id="test"
-  stackframe={
-    Object {
-      "abs_path": "/app/server/routes.js",
-      "context": Object {
-        "post": Array [
-          "    req.body.lines.forEach(function (line) {",
-          "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-        ],
-        "pre": Array [
-          "    })",
-          "",
-        ],
-      },
-      "exclude_from_grouping": false,
-      "filename": "server/routes.js",
-      "function": "<anonymous>",
-      "library_frame": false,
-      "line": Object {
-        "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-        "number": 307,
-      },
-    }
-  }
->
-  <EuiAccordion
-    arrowDisplay="left"
-    buttonContent={
-      <FrameHeading
-        isLibraryFrame={false}
-        stackframe={
-          Object {
-            "abs_path": "/app/server/routes.js",
-            "context": Object {
-              "post": Array [
-                "    req.body.lines.forEach(function (line) {",
-                "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-              ],
-              "pre": Array [
-                "    })",
-                "",
-              ],
-            },
-            "exclude_from_grouping": false,
-            "filename": "server/routes.js",
-            "function": "<anonymous>",
-            "library_frame": false,
-            "line": Object {
-              "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-              "number": 307,
-            },
-          }
-        }
-      />
-    }
-    id="test"
-    initialIsOpen={false}
-    isLoading={false}
-    isLoadingMessage={false}
-    paddingSize="none"
-  >
-    <div
-      className="euiAccordion"
-    >
-      <div
-        className="euiAccordion__triggerWrapper"
-      >
-        <button
-          aria-controls="test"
-          aria-expanded={false}
-          className="euiAccordion__button"
-          id="generated-id"
-          onClick={[Function]}
-          type="button"
-        >
-          <span
-            className="euiAccordion__iconWrapper"
-          >
-            <EuiIcon
-              className="euiAccordion__icon"
-              size="m"
-              type="arrowRight"
-            >
-              <div
-                className="euiAccordion__icon"
-                data-euiicon-type="arrowRight"
-                size="m"
-              />
-            </EuiIcon>
-          </span>
-          <span
-            className="euiIEFlexWrapFix"
-          >
-            <FrameHeading
-              isLibraryFrame={false}
-              stackframe={
-                Object {
-                  "abs_path": "/app/server/routes.js",
-                  "context": Object {
-                    "post": Array [
-                      "    req.body.lines.forEach(function (line) {",
-                      "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-                    ],
-                    "pre": Array [
-                      "    })",
-                      "",
-                    ],
-                  },
-                  "exclude_from_grouping": false,
-                  "filename": "server/routes.js",
-                  "function": "<anonymous>",
-                  "library_frame": false,
-                  "line": Object {
-                    "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-                    "number": 307,
-                  },
-                }
-              }
-            >
-              <styled.div
-                data-test-subj="FrameHeading"
-              >
-                <div
-                  className="c0"
-                  data-test-subj="FrameHeading"
-                >
-                  <DefaultFrameHeadingRenderer
-                    fileDetailComponent={
-                      Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "attrs": Array [],
-                        "componentStyle": ComponentStyle {
-                          "baseHash": 211589981,
-                          "componentId": "sc-fznyAO",
-                          "isStatic": false,
-                          "rules": Array [
-                            "
-  color: ",
-                            [Function],
-                            ";
-",
-                          ],
-                          "staticRulesId": "",
-                        },
-                        "displayName": "styled.span",
-                        "foldedComponentIds": Array [],
-                        "render": [Function],
-                        "shouldForwardProp": undefined,
-                        "styledComponentId": "sc-fznyAO",
-                        "target": "span",
-                        "toString": [Function],
-                        "warnTooManyClasses": [Function],
-                        "withComponent": [Function],
-                      }
-                    }
-                    stackframe={
-                      Object {
-                        "abs_path": "/app/server/routes.js",
-                        "context": Object {
-                          "post": Array [
-                            "    req.body.lines.forEach(function (line) {",
-                            "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-                          ],
-                          "pre": Array [
-                            "    })",
-                            "",
-                          ],
-                        },
-                        "exclude_from_grouping": false,
-                        "filename": "server/routes.js",
-                        "function": "<anonymous>",
-                        "library_frame": false,
-                        "line": Object {
-                          "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-                          "number": 307,
-                        },
-                      }
-                    }
-                  >
-                    <styled.span>
-                      <span
-                        className="c1"
-                      >
-                        server/routes.js
-                      </span>
-                    </styled.span>
-                     in
-                     
-                    <styled.span>
-                      <span
-                        className="c1"
-                      >
-                        &lt;anonymous&gt;
-                      </span>
-                    </styled.span>
-                     at 
-                    <styled.span>
-                      <span
-                        className="c1"
-                      >
-                        line 
-                        307
-                      </span>
-                    </styled.span>
-                  </DefaultFrameHeadingRenderer>
-                </div>
-              </styled.div>
-            </FrameHeading>
-          </span>
-        </button>
-      </div>
-      <div
-        className="euiAccordion__childWrapper"
-        id="test"
-      >
-        <EuiResizeObserver
-          onResize={[Function]}
-        >
-          <div>
-            <div
-              className=""
-            >
-              <styled.div
-                isLibraryFrame={false}
-              >
-                <div
-                  className="c2"
-                >
-                  <Context
-                    isLibraryFrame={false}
-                    stackframe={
-                      Object {
-                        "abs_path": "/app/server/routes.js",
-                        "context": Object {
-                          "post": Array [
-                            "    req.body.lines.forEach(function (line) {",
-                            "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-                          ],
-                          "pre": Array [
-                            "    })",
-                            "",
-                          ],
-                        },
-                        "exclude_from_grouping": false,
-                        "filename": "server/routes.js",
-                        "function": "<anonymous>",
-                        "library_frame": false,
-                        "line": Object {
-                          "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-                          "number": 307,
-                        },
-                      }
-                    }
-                  >
-                    <styled.div>
-                      <div
-                        className="c3"
-                      >
-                        <styled.div
-                          lineNumber={2}
-                        >
-                          <div
-                            className="c4"
-                          />
-                        </styled.div>
-                        <styled.div
-                          isLibraryFrame={false}
-                        >
-                          <div
-                            className="c5"
-                          >
-                            <styled.div
-                              highlight={false}
-                              key="    })0"
-                            >
-                              <div
-                                className="c6"
-                              >
-                                305
-                                .
-                              </div>
-                            </styled.div>
-                            <styled.div
-                              highlight={false}
-                              key="1"
-                            >
-                              <div
-                                className="c6"
-                              >
-                                306
-                                .
-                              </div>
-                            </styled.div>
-                            <styled.div
-                              highlight={true}
-                              key="    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())2"
-                            >
-                              <div
-                                className="c7"
-                              >
-                                307
-                                .
-                              </div>
-                            </styled.div>
-                            <styled.div
-                              highlight={false}
-                              key="    req.body.lines.forEach(function (line) {3"
-                            >
-                              <div
-                                className="c6"
-                              >
-                                308
-                                .
-                              </div>
-                            </styled.div>
-                            <styled.div
-                              highlight={false}
-                              key="      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())4"
-                            >
-                              <div
-                                className="c6"
-                              >
-                                309
-                                .
-                              </div>
-                            </styled.div>
-                          </div>
-                        </styled.div>
-                        <styled.div>
-                          <div
-                            className="c8"
-                          >
-                            <SyntaxHighlighter
-                              CodeTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": -2021127760,
-                                    "componentId": "sc-fzoLsD",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.code",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzoLsD",
-                                  "target": "code",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              PreTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  // Override all styles
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 ",
-                                      "18px",
-                                      ";
-  line-height: ",
-                                      "18px",
-                                      ";
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.pre",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
-                                  "target": "pre",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              customStyle={
-                                Object {
-                                  "overflowX": null,
-                                  "padding": null,
-                                }
-                              }
-                              key="    })0"
-                              language="javascript"
-                              style={
-                                Object {
-                                  "hljs": Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": "auto",
-                                    "padding": "0.5em",
-                                  },
-                                  "hljs-addition": Object {
-                                    "backgroundColor": "#baeeba",
-                                  },
-                                  "hljs-attr": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-attribute": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-built_in": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-builtin-name": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-bullet": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-class .hljs-title": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-comment": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-deletion": Object {
-                                    "backgroundColor": "#ffc8bd",
-                                  },
-                                  "hljs-doctag": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-emphasis": Object {
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-formula": Object {
-                                    "backgroundColor": "#eee",
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-keyword": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-link": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-literal": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-meta": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-name": Object {
-                                    "color": "#008",
-                                  },
-                                  "hljs-number": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-params": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-quote": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-regexp": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-section": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-selector-class": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-id": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-tag": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-string": Object {
-                                    "color": "#c41a16",
-                                  },
-                                  "hljs-strong": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-subst": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-symbol": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-tag": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-template-variable": Object {
-                                    "color": "#660",
-                                  },
-                                  "hljs-title": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-type": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-variable": Object {
-                                    "color": "#660",
-                                  },
-                                }
-                              }
-                            >
-                              <styled.pre
-                                style={
-                                  Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": null,
-                                    "padding": null,
-                                  }
-                                }
-                              >
-                                <pre
-                                  className="c9"
-                                  style={
-                                    Object {
-                                      "background": "#fff",
-                                      "color": "black",
-                                      "display": "block",
-                                      "overflowX": null,
-                                      "padding": null,
-                                    }
-                                  }
-                                >
-                                  <styled.code>
-                                    <code
-                                      className="c10"
-                                    >
-                                          })
-                                    </code>
-                                  </styled.code>
-                                </pre>
-                              </styled.pre>
-                            </SyntaxHighlighter>
-                            <SyntaxHighlighter
-                              CodeTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": -2021127760,
-                                    "componentId": "sc-fzoLsD",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.code",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzoLsD",
-                                  "target": "code",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              PreTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  // Override all styles
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 ",
-                                      "18px",
-                                      ";
-  line-height: ",
-                                      "18px",
-                                      ";
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.pre",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
-                                  "target": "pre",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              customStyle={
-                                Object {
-                                  "overflowX": null,
-                                  "padding": null,
-                                }
-                              }
-                              key="1"
-                              language="javascript"
-                              style={
-                                Object {
-                                  "hljs": Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": "auto",
-                                    "padding": "0.5em",
-                                  },
-                                  "hljs-addition": Object {
-                                    "backgroundColor": "#baeeba",
-                                  },
-                                  "hljs-attr": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-attribute": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-built_in": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-builtin-name": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-bullet": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-class .hljs-title": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-comment": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-deletion": Object {
-                                    "backgroundColor": "#ffc8bd",
-                                  },
-                                  "hljs-doctag": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-emphasis": Object {
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-formula": Object {
-                                    "backgroundColor": "#eee",
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-keyword": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-link": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-literal": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-meta": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-name": Object {
-                                    "color": "#008",
-                                  },
-                                  "hljs-number": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-params": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-quote": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-regexp": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-section": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-selector-class": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-id": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-tag": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-string": Object {
-                                    "color": "#c41a16",
-                                  },
-                                  "hljs-strong": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-subst": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-symbol": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-tag": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-template-variable": Object {
-                                    "color": "#660",
-                                  },
-                                  "hljs-title": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-type": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-variable": Object {
-                                    "color": "#660",
-                                  },
-                                }
-                              }
-                            >
-                              <styled.pre
-                                style={
-                                  Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": null,
-                                    "padding": null,
-                                  }
-                                }
-                              >
-                                <pre
-                                  className="c9"
-                                  style={
-                                    Object {
-                                      "background": "#fff",
-                                      "color": "black",
-                                      "display": "block",
-                                      "overflowX": null,
-                                      "padding": null,
-                                    }
-                                  }
-                                >
-                                  <styled.code>
-                                    <code
-                                      className="c10"
-                                    >
-                                      
-
-                                    </code>
-                                  </styled.code>
-                                </pre>
-                              </styled.pre>
-                            </SyntaxHighlighter>
-                            <SyntaxHighlighter
-                              CodeTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": -2021127760,
-                                    "componentId": "sc-fzoLsD",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.code",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzoLsD",
-                                  "target": "code",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              PreTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  // Override all styles
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 ",
-                                      "18px",
-                                      ";
-  line-height: ",
-                                      "18px",
-                                      ";
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.pre",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
-                                  "target": "pre",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              customStyle={
-                                Object {
-                                  "overflowX": null,
-                                  "padding": null,
-                                }
-                              }
-                              key="    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())2"
-                              language="javascript"
-                              style={
-                                Object {
-                                  "hljs": Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": "auto",
-                                    "padding": "0.5em",
-                                  },
-                                  "hljs-addition": Object {
-                                    "backgroundColor": "#baeeba",
-                                  },
-                                  "hljs-attr": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-attribute": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-built_in": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-builtin-name": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-bullet": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-class .hljs-title": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-comment": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-deletion": Object {
-                                    "backgroundColor": "#ffc8bd",
-                                  },
-                                  "hljs-doctag": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-emphasis": Object {
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-formula": Object {
-                                    "backgroundColor": "#eee",
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-keyword": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-link": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-literal": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-meta": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-name": Object {
-                                    "color": "#008",
-                                  },
-                                  "hljs-number": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-params": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-quote": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-regexp": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-section": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-selector-class": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-id": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-tag": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-string": Object {
-                                    "color": "#c41a16",
-                                  },
-                                  "hljs-strong": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-subst": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-symbol": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-tag": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-template-variable": Object {
-                                    "color": "#660",
-                                  },
-                                  "hljs-title": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-type": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-variable": Object {
-                                    "color": "#660",
-                                  },
-                                }
-                              }
-                            >
-                              <styled.pre
-                                style={
-                                  Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": null,
-                                    "padding": null,
-                                  }
-                                }
-                              >
-                                <pre
-                                  className="c9"
-                                  style={
-                                    Object {
-                                      "background": "#fff",
-                                      "color": "black",
-                                      "display": "block",
-                                      "overflowX": null,
-                                      "padding": null,
-                                    }
-                                  }
-                                >
-                                  <styled.code>
-                                    <code
-                                      className="c10"
-                                    >
-                                          client.query(
-                                      <span
-                                        key="code-segement1"
-                                        style={
-                                          Object {
-                                            "color": "#c41a16",
-                                          }
-                                        }
-                                      >
-                                        'SELECT id FROM customers WHERE id=$1'
-                                      </span>
-                                      , [req.body.customer_id], next())
-                                    </code>
-                                  </styled.code>
-                                </pre>
-                              </styled.pre>
-                            </SyntaxHighlighter>
-                            <SyntaxHighlighter
-                              CodeTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": -2021127760,
-                                    "componentId": "sc-fzoLsD",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.code",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzoLsD",
-                                  "target": "code",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              PreTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  // Override all styles
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 ",
-                                      "18px",
-                                      ";
-  line-height: ",
-                                      "18px",
-                                      ";
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.pre",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
-                                  "target": "pre",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              customStyle={
-                                Object {
-                                  "overflowX": null,
-                                  "padding": null,
-                                }
-                              }
-                              key="    req.body.lines.forEach(function (line) {3"
-                              language="javascript"
-                              style={
-                                Object {
-                                  "hljs": Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": "auto",
-                                    "padding": "0.5em",
-                                  },
-                                  "hljs-addition": Object {
-                                    "backgroundColor": "#baeeba",
-                                  },
-                                  "hljs-attr": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-attribute": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-built_in": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-builtin-name": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-bullet": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-class .hljs-title": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-comment": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-deletion": Object {
-                                    "backgroundColor": "#ffc8bd",
-                                  },
-                                  "hljs-doctag": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-emphasis": Object {
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-formula": Object {
-                                    "backgroundColor": "#eee",
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-keyword": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-link": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-literal": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-meta": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-name": Object {
-                                    "color": "#008",
-                                  },
-                                  "hljs-number": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-params": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-quote": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-regexp": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-section": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-selector-class": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-id": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-tag": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-string": Object {
-                                    "color": "#c41a16",
-                                  },
-                                  "hljs-strong": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-subst": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-symbol": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-tag": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-template-variable": Object {
-                                    "color": "#660",
-                                  },
-                                  "hljs-title": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-type": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-variable": Object {
-                                    "color": "#660",
-                                  },
-                                }
-                              }
-                            >
-                              <styled.pre
-                                style={
-                                  Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": null,
-                                    "padding": null,
-                                  }
-                                }
-                              >
-                                <pre
-                                  className="c9"
-                                  style={
-                                    Object {
-                                      "background": "#fff",
-                                      "color": "black",
-                                      "display": "block",
-                                      "overflowX": null,
-                                      "padding": null,
-                                    }
-                                  }
-                                >
-                                  <styled.code>
-                                    <code
-                                      className="c10"
-                                    >
-                                          req.body.lines.forEach(
-                                      <span
-                                        key="code-segement1"
-                                        style={Object {}}
-                                      >
-                                        <span
-                                          key="code-segment-1-0"
-                                          style={
-                                            Object {
-                                              "color": "#aa0d91",
-                                            }
-                                          }
-                                        >
-                                          function
-                                        </span>
-                                         (
-                                        <span
-                                          key="code-segment-1-2"
-                                          style={
-                                            Object {
-                                              "color": "#5c2699",
-                                            }
-                                          }
-                                        >
-                                          line
-                                        </span>
-                                        ) 
-                                      </span>
-                                      {
-                                    </code>
-                                  </styled.code>
-                                </pre>
-                              </styled.pre>
-                            </SyntaxHighlighter>
-                            <SyntaxHighlighter
-                              CodeTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": -2021127760,
-                                    "componentId": "sc-fzoLsD",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  position: relative;
-  padding: 0;
-  margin: 0;
-  white-space: pre;
-  z-index: 2;
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.code",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzoLsD",
-                                  "target": "code",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              PreTag={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "attrs": Array [],
-                                  "componentStyle": ComponentStyle {
-                                    "baseHash": 1280172402,
-                                    "componentId": "sc-fzozJi",
-                                    "isStatic": false,
-                                    "rules": Array [
-                                      "
-  // Override all styles
-  margin: 0;
-  color: inherit;
-  background: inherit;
-  border: 0;
-  border-radius: 0;
-  overflow: initial;
-  padding: 0 ",
-                                      "18px",
-                                      ";
-  line-height: ",
-                                      "18px",
-                                      ";
-",
-                                    ],
-                                    "staticRulesId": "",
-                                  },
-                                  "displayName": "styled.pre",
-                                  "foldedComponentIds": Array [],
-                                  "render": [Function],
-                                  "shouldForwardProp": undefined,
-                                  "styledComponentId": "sc-fzozJi",
-                                  "target": "pre",
-                                  "toString": [Function],
-                                  "warnTooManyClasses": [Function],
-                                  "withComponent": [Function],
-                                }
-                              }
-                              customStyle={
-                                Object {
-                                  "overflowX": null,
-                                  "padding": null,
-                                }
-                              }
-                              key="      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())4"
-                              language="javascript"
-                              style={
-                                Object {
-                                  "hljs": Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": "auto",
-                                    "padding": "0.5em",
-                                  },
-                                  "hljs-addition": Object {
-                                    "backgroundColor": "#baeeba",
-                                  },
-                                  "hljs-attr": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-attribute": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-built_in": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-builtin-name": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-bullet": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-class .hljs-title": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-comment": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-deletion": Object {
-                                    "backgroundColor": "#ffc8bd",
-                                  },
-                                  "hljs-doctag": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-emphasis": Object {
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-formula": Object {
-                                    "backgroundColor": "#eee",
-                                    "fontStyle": "italic",
-                                  },
-                                  "hljs-keyword": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-link": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-literal": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-meta": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-name": Object {
-                                    "color": "#008",
-                                  },
-                                  "hljs-number": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-params": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-quote": Object {
-                                    "color": "#006a00",
-                                  },
-                                  "hljs-regexp": Object {
-                                    "color": "#080",
-                                  },
-                                  "hljs-section": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-selector-class": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-id": Object {
-                                    "color": "#9b703f",
-                                  },
-                                  "hljs-selector-tag": Object {
-                                    "color": "#aa0d91",
-                                  },
-                                  "hljs-string": Object {
-                                    "color": "#c41a16",
-                                  },
-                                  "hljs-strong": Object {
-                                    "fontWeight": "bold",
-                                  },
-                                  "hljs-subst": Object {
-                                    "color": "#000",
-                                  },
-                                  "hljs-symbol": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-tag": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-template-variable": Object {
-                                    "color": "#660",
-                                  },
-                                  "hljs-title": Object {
-                                    "color": "#1c00cf",
-                                  },
-                                  "hljs-type": Object {
-                                    "color": "#5c2699",
-                                  },
-                                  "hljs-variable": Object {
-                                    "color": "#660",
-                                  },
-                                }
-                              }
-                            >
-                              <styled.pre
-                                style={
-                                  Object {
-                                    "background": "#fff",
-                                    "color": "black",
-                                    "display": "block",
-                                    "overflowX": null,
-                                    "padding": null,
-                                  }
-                                }
-                              >
-                                <pre
-                                  className="c9"
-                                  style={
-                                    Object {
-                                      "background": "#fff",
-                                      "color": "black",
-                                      "display": "block",
-                                      "overflowX": null,
-                                      "padding": null,
-                                    }
-                                  }
-                                >
-                                  <styled.code>
-                                    <code
-                                      className="c10"
-                                    >
-                                            client.query(
-                                      <span
-                                        key="code-segement1"
-                                        style={
-                                          Object {
-                                            "color": "#c41a16",
-                                          }
-                                        }
-                                      >
-                                        'SELECT id FROM products WHERE id=$1'
-                                      </span>
-                                      , [line.id], next())
-                                    </code>
-                                  </styled.code>
-                                </pre>
-                              </styled.pre>
-                            </SyntaxHighlighter>
-                          </div>
-                        </styled.div>
-                      </div>
-                    </styled.div>
-                  </Context>
-                </div>
-              </styled.div>
-              <Variables />
-            </div>
-          </div>
-        </EuiResizeObserver>
-      </div>
-    </div>
-  </EuiAccordion>
-</Stackframe>
-`;
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/index.test.ts.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/index.test.ts.snap
deleted file mode 100644
index 6384253cb62a1..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/index.test.ts.snap
+++ /dev/null
@@ -1,468 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stacktrace/index getGroupedStackframes should collapse the library frames into a set of grouped stackframes 1`] = `
-Array [
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": false,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/server/routes.js",
-        "context": Object {
-          "post": Array [
-            "    req.body.lines.forEach(function (line) {",
-            "      client.query('SELECT id FROM products WHERE id=$1', [line.id], next())",
-          ],
-          "pre": Array [
-            "    })",
-            "",
-          ],
-        },
-        "exclude_from_grouping": false,
-        "filename": "server/routes.js",
-        "function": "<anonymous>",
-        "library_frame": false,
-        "line": Object {
-          "context": "    client.query('SELECT id FROM customers WHERE id=$1', [req.body.customer_id], next())",
-          "number": 307,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": true,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/node_modules/pg-pool/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/pg-pool/index.js",
-        "function": "BoundPool.<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 137,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/generic-pool/lib/generic-pool.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/generic-pool/lib/generic-pool.js",
-        "function": "dispense",
-        "library_frame": true,
-        "line": Object {
-          "number": 310,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/generic-pool/lib/generic-pool.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/generic-pool/lib/generic-pool.js",
-        "function": "acquire",
-        "library_frame": true,
-        "line": Object {
-          "number": 391,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/pg-pool/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/pg-pool/index.js",
-        "function": "BoundPool.<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 111,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/pg-pool/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/pg-pool/index.js",
-        "function": "Pool._promiseNoCallback",
-        "library_frame": true,
-        "line": Object {
-          "number": 75,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/pg-pool/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/pg-pool/index.js",
-        "function": "Pool.connect",
-        "library_frame": true,
-        "line": Object {
-          "number": 109,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": false,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/server/db.js",
-        "context": Object {
-          "post": Array [
-            "}",
-            "",
-          ],
-          "pre": Array [
-            "",
-            "exports.client = function (cb) {",
-          ],
-        },
-        "exclude_from_grouping": false,
-        "filename": "server/db.js",
-        "function": "exports.client",
-        "library_frame": false,
-        "line": Object {
-          "context": "  pool.connect(cb)",
-          "number": 11,
-        },
-      },
-      Object {
-        "abs_path": "/app/server/routes.js",
-        "context": Object {
-          "post": Array [
-            "    if (err) return error(err, res)",
-            "",
-          ],
-          "pre": Array [
-            "  }",
-            "",
-          ],
-        },
-        "exclude_from_grouping": false,
-        "filename": "server/routes.js",
-        "function": "<anonymous>",
-        "library_frame": false,
-        "line": Object {
-          "context": "  db.client(function (err, client, done) {",
-          "number": 248,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": true,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/layer.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/layer.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 95,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/route.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/route.js",
-        "function": "next",
-        "library_frame": true,
-        "line": Object {
-          "number": 137,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/route.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/route.js",
-        "function": "dispatch",
-        "library_frame": true,
-        "line": Object {
-          "number": 112,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/layer.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/layer.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 95,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 281,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "process_params",
-        "library_frame": true,
-        "line": Object {
-          "number": 335,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "next",
-        "library_frame": true,
-        "line": Object {
-          "number": 275,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 174,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "router",
-        "library_frame": true,
-        "line": Object {
-          "number": 47,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/layer.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/layer.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 95,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "trim_prefix",
-        "library_frame": true,
-        "line": Object {
-          "number": 317,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 284,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "process_params",
-        "library_frame": true,
-        "line": Object {
-          "number": 335,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "next",
-        "library_frame": true,
-        "line": Object {
-          "number": 275,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": false,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/server.js",
-        "context": Object {
-          "post": Array [
-            "  }",
-            "",
-          ],
-          "pre": Array [
-            "app.use('/api', function (req, res, next) {",
-            "  if (Math.random() > opbeansRedirectProbability) {",
-          ],
-        },
-        "exclude_from_grouping": false,
-        "filename": "server.js",
-        "function": "<anonymous>",
-        "library_frame": false,
-        "line": Object {
-          "context": "    return next()",
-          "number": 88,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": true,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/layer.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/layer.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 95,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "trim_prefix",
-        "library_frame": true,
-        "line": Object {
-          "number": 317,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 284,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "process_params",
-        "library_frame": true,
-        "line": Object {
-          "number": 335,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": true,
-    "isLibraryFrame": true,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": true,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "next",
-        "library_frame": true,
-        "line": Object {
-          "number": 275,
-        },
-      },
-    ],
-  },
-  Object {
-    "excludeFromGrouping": false,
-    "isLibraryFrame": true,
-    "stackframes": Array [
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 635,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "next",
-        "library_frame": true,
-        "line": Object {
-          "number": 260,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 174,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "router",
-        "library_frame": true,
-        "line": Object {
-          "number": 47,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/layer.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/layer.js",
-        "function": "handle",
-        "library_frame": true,
-        "line": Object {
-          "number": 95,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "trim_prefix",
-        "library_frame": true,
-        "line": Object {
-          "number": 317,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "<anonymous>",
-        "library_frame": true,
-        "line": Object {
-          "number": 284,
-        },
-      },
-      Object {
-        "abs_path": "/app/node_modules/express/lib/router/index.js",
-        "exclude_from_grouping": false,
-        "filename": "node_modules/express/lib/router/index.js",
-        "function": "process_params",
-        "library_frame": true,
-        "line": Object {
-          "number": 335,
-        },
-      },
-    ],
-  },
-]
-`;
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/index.test.ts b/x-pack/plugins/apm/public/components/shared/Stacktrace/stacktrace.test.ts
similarity index 90%
rename from x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/index.test.ts
rename to x-pack/plugins/apm/public/components/shared/Stacktrace/stacktrace.test.ts
index cd8bf90301836..9c76dad16d679 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/index.test.ts
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/stacktrace.test.ts
@@ -4,15 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Stackframe } from '../../../../../typings/es_schemas/raw/fields/stackframe';
-import { getGroupedStackframes } from '../index';
-import stacktracesMock from './stacktraces.json';
+import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
+import { getGroupedStackframes } from './';
+import stacktracesMock from './__fixtures__/stacktraces.json';
 
-describe('Stacktrace/index', () => {
+describe('Stacktrace', () => {
   describe('getGroupedStackframes', () => {
-    it('should collapse the library frames into a set of grouped stackframes', () => {
-      const result = getGroupedStackframes(stacktracesMock as Stackframe[]);
-      expect(result).toMatchSnapshot();
+    it('collapses the library frames into a set of grouped stackframes', () => {
+      expect(
+        getGroupedStackframes(stacktracesMock as Stackframe[]).every(
+          (group) => group.stackframes.length > 0
+        )
+      ).toEqual(true);
     });
 
     it('should group stackframes when `library_frame` is identical and `exclude_from_grouping` is false', () => {