diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js
index df6e5b5751..a3f1ce3628 100644
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/LineChart.test.js
@@ -1,21 +1,60 @@
-import { testComponentSnapshotsWithFixtures } from 'foremanReact/common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { data, timeseriesData } from './LineChart.fixtures';
 import LineChart from './index';
 
 jest.mock('../../../../../services/charts/ChartService.consts');
 
-const fixtures = {
-  'should render line chart': {
-    data,
-    id: 'abc',
+// The patternfly-react LineChart is C3-based and crashes under jsdom, so stub it
+// and expose the computed chart config the component passes down (the config is
+// what the original shallow snapshot verified).
+jest.mock('patternfly-react', () => ({
+  LineChart: props => {
+    // eslint-disable-next-line global-require
+    const react = require('react');
+    return react.createElement('div', {
+      'data-testid': 'pf-line-chart',
+      'data-axis': JSON.stringify(props.axis),
+      'data-columns': JSON.stringify(props.data.columns),
+    });
   },
-  'should render line chart with timeseries': {
-    data: timeseriesData,
-    xAxisDataLabel: 'x',
-    config: 'timeseries',
-    id: 'xyz',
-  },
-};
+}));
+
+describe('Line Chart', () => {
+  it('renders a line chart with the data columns', () => {
+    render(<LineChart data={data} id="abc" />);
+
+    const chart = screen.getByTestId('pf-line-chart');
+    const columns = JSON.parse(chart.dataset.columns);
+    expect(columns).toEqual([
+      ['red', 5, 7, 9],
+      ['green', 2, 4, 6],
+    ]);
+    // regular config uses no special axis
+    expect(JSON.parse(chart.dataset.axis)).toEqual({});
+  });
+
+  it('renders a timeseries line chart with a timeseries x axis', () => {
+    render(
+      <LineChart
+        data={timeseriesData}
+        xAxisDataLabel="x"
+        config="timeseries"
+        id="xyz"
+      />
+    );
 
-describe('Line Chart', () =>
-  testComponentSnapshotsWithFixtures(LineChart, fixtures));
+    const chart = screen.getByTestId('pf-line-chart');
+    const axis = JSON.parse(chart.dataset.axis);
+    expect(axis.x.type).toBe('timeseries');
+    // the x data column is included
+    const columns = JSON.parse(chart.dataset.columns);
+    expect(columns).toContainEqual([
+      'x',
+      1557014400000,
+      1559779200000,
+      1562457600000,
+    ]);
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap b/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap
deleted file mode 100644
index 5ed53a8037..0000000000
--- a/webpack/assets/javascripts/react_app/components/common/charts/LineChart/__snapshots__/LineChart.test.js.snap
+++ /dev/null
@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Line Chart should render line chart 1`] = `
-<LineChart
-  axis={Object {}}
-  className="line-chart-pf"
-  color={
-    Object {
-      "pattern": Array [],
-    }
-  }
-  data={
-    Object {
-      "colors": Object {
-        "green": "#89A54E",
-        "red": "#AA4643",
-      },
-      "columns": Array [
-        Array [
-          "red",
-          5,
-          7,
-          9,
-        ],
-        Array [
-          "green",
-          2,
-          4,
-          6,
-        ],
-      ],
-      "onclick": [Function],
-    }
-  }
-  grid={
-    Object {
-      "x": Object {
-        "show": false,
-      },
-      "y": Object {
-        "show": true,
-      },
-    }
-  }
-  id="abc"
-  legend={
-    Object {
-      "show": true,
-    }
-  }
-  onrendered={[Function]}
-  padding={null}
-  point={
-    Object {
-      "focus": Object {
-        "expand": Object {
-          "r": 5,
-        },
-      },
-      "r": 3,
-    }
-  }
-  size={
-    Object {
-      "height": 350,
-      "width": 1000,
-    }
-  }
-  title={
-    Object {
-      "type": "percent",
-    }
-  }
-  type="line"
-  unloadBeforeLoad={false}
-/>
-`;
-
-exports[`Line Chart should render line chart with timeseries 1`] = `
-<LineChart
-  axis={
-    Object {
-      "x": Object {
-        "tick": Object {
-          "format": [MockFunction],
-          "rotate": -40,
-        },
-        "type": "timeseries",
-      },
-    }
-  }
-  className="line-chart-pf"
-  color={
-    Object {
-      "pattern": Array [],
-    }
-  }
-  data={
-    Object {
-      "colors": Object {
-        "green": "#89A54E",
-        "red": "#AA4643",
-      },
-      "columns": Array [
-        Array [
-          "red",
-          5,
-          7,
-          9,
-        ],
-        Array [
-          "green",
-          2,
-          4,
-          6,
-        ],
-        Array [
-          "x",
-          1557014400000,
-          1559779200000,
-          1562457600000,
-        ],
-      ],
-      "onclick": [Function],
-      "x": "x",
-    }
-  }
-  grid={
-    Object {
-      "x": Object {
-        "show": false,
-      },
-      "y": Object {
-        "show": true,
-      },
-    }
-  }
-  id="xyz"
-  legend={
-    Object {
-      "show": true,
-    }
-  }
-  onrendered={[Function]}
-  padding={
-    Object {
-      "bottom": 70,
-      "left": 30,
-      "right": 20,
-      "top": 10,
-    }
-  }
-  point={
-    Object {
-      "focus": Object {
-        "expand": Object {
-          "r": 5,
-        },
-      },
-      "r": 3,
-    }
-  }
-  size={
-    Object {
-      "height": 350,
-      "width": 1000,
-    }
-  }
-  title={
-    Object {
-      "type": "percent",
-    }
-  }
-  type="line"
-  unloadBeforeLoad={false}
-/>
-`;