chore: import @testing-library/dom from npm instead of unpkg (#98)

smeijer · web-flow · commit 82b6019b759e · 2020-06-05T16:02:11.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "prettier": "prettier . --write"
   },
   "dependencies": {
+    "@testing-library/dom": "^7.5.7",
     "codemirror": "5.54.0",
     "dom-accessibility-api": "^0.4.3",
     "js-beautify": "^1.11.0",
@@ -37,7 +38,6 @@
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
-    "@testing-library/dom": "^7.5.7",
     "@testing-library/react": "^10.0.4",
     "@testing-library/user-event": "^10.3.5",
     "babel-eslint": "^10.1.0",
diff --git a/src/components/Editor.js b/src/components/Editor.js
@@ -1,11 +1,11 @@
-/* global TestingLibraryDom */
 import React, { useRef, useEffect } from 'react';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/xml/xml';
 import 'codemirror/addon/edit/closetag';
 import 'codemirror/addon/fold/xml-fold';
 import 'codemirror/addon/scroll/simplescrollbars';
 import 'codemirror/addon/hint/show-hint';
+import { queries } from '@testing-library/dom';
 
 import CodeMirror from 'codemirror';
 import debounce from 'lodash/debounce';
@@ -36,7 +36,7 @@ const options = {
 };
 
 const suggestions = {
-  screen: Object.keys(TestingLibraryDom.queries)
+  screen: Object.keys(queries)
     .filter((x) => x.startsWith('getBy'))
     .sort(),
   container: ['querySelector', 'querySelectorAll'],
diff --git a/src/index.html b/src/index.html
@@ -31,7 +31,6 @@
 
 <body>
     <div id="app"></div>
-    <script type="text/javascript" src="https://www.unpkg.com/@testing-library/dom@7.5.6/dist/@testing-library/dom.umd.min.js"></script>
     <script type="text/javascript" src="index.js"></script>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
diff --git a/src/parser.js b/src/parser.js
@@ -3,18 +3,12 @@ import { ensureArray, getQueryAdvise } from './lib';
 import { queries as supportedQueries } from './constants';
 import cssPath from './lib/cssPath';
 
-// this is not the way I want it to be, but I can't get '@testing-library/dom'
-// to build with Parcel. Something with "Incompatible receiver, Map required".
-// It works when running parcel in dev mode, but not in build mode. Seems to
-// have something to do with a core-js Map polyfill being used?
-// It's now loaded from unpkg.com via ./index.html
-//import { getQueriesForElement, queries, logDOM } from '@testing-library/dom';
-const {
+import {
   getQueriesForElement,
   queries,
   getRoles,
   logDOM,
-} = window.TestingLibraryDom;
+} from '@testing-library/dom';
 
 const debug = (element, maxLength, options) =>
   Array.isArray(element)
diff --git a/tests/setupTests.js b/tests/setupTests.js
@@ -1,7 +1,3 @@
-import * as TestingLibraryDom from '@testing-library/dom';
-
-window.TestingLibraryDom = TestingLibraryDom;
-
 if (window.document) {
   window.document.createRange = () => ({
     setStart: () => {},
