Enables JSX and TSX for tests

Shopify · Oct 11, 2023 · 4734813 · 4734813
1 parent e14d20e
commit 4734813
Show file tree

Hide file tree

Showing 19 changed files with 245 additions and 106 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,6 +3,7 @@ const path = require('path');
 module.exports = {
   extends: [
     'plugin:@shopify/typescript',
+    'plugin:@shopify/react',
     'plugin:@shopify/jest',
     'plugin:@shopify/prettier',
   ],
@@ -13,6 +14,9 @@ module.exports = {
   },
   rules: {
     'jest/valid-title': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': [1, {extensions: ['.jsx', '.tsx']}],
   },
   settings: {
     'import/resolver': {
@@ -24,4 +28,12 @@ module.exports = {
       },
     },
   },
+  overrides: [
+    {
+      files: ['./**/*.test.{jsx,tsx}'],
+      rules: {
+        '@shopify/jsx-no-hardcoded-content': 'off',
+      },
+    },
+  ],
 };
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,7 @@
 module.exports = function (api) {
+  const envName = api.env();
+  const development = envName === 'development' || envName === 'test';
+
   api.cache(true);
 
   return {
@@ -8,6 +11,10 @@ module.exports = function (api) {
         {useBuiltIns: 'entry', corejs: '3.0', bugfixes: true},
       ],
       ['@babel/preset-typescript'],
+      [
+        '@babel/preset-react',
+        {development, useBuiltIns: true, runtime: 'automatic'},
+      ],
     ],
     plugins: [['@babel/plugin-proposal-decorators', {version: '2023-05'}]],
     assumptions: {

diff --git a/jest.config.js b/jest.config.js
@@ -1,12 +1,14 @@
+const {TextEncoder} = require('util');
+
 module.exports = {
   testEnvironment: 'jsdom',
-  testMatch: ['<rootDir>/src/**/*.test.(js|ts)'],
+  testMatch: ['<rootDir>/src/**/*.test.(js|jsx|ts|tsx)'],
   setupFiles: ['<rootDir>/test/environment.ts'],
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   transform: {
     '\\.(ts|js)': ['babel-jest'],
   },
-  moduleFileExtensions: ['js', 'ts'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   collectCoverageFrom: [
     'src/**/*.{js,ts}',
     '!src/**/*/index.{js,ts}',
@@ -18,4 +20,7 @@ module.exports = {
   coverageDirectory: './coverage/',
   collectCoverage: true,
   moduleDirectories: ['node_modules', 'src', 'test'],
+  globals: {
+    TextEncoder,
+  },
 };
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "@babel/core": "^7.22.20",
     "@babel/plugin-proposal-decorators": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
@@ -63,6 +64,7 @@
     "@shopify/typescript-configs": "^5.1.0",
     "@types/jest": "^29.5.5",
     "@types/node": "^20.6.3",
+    "@types/react-dom": "^18.2.13",
     "concurrently": "^3.5.1",
     "esdoc": "^1.1.0",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
@@ -71,6 +73,8 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.29.3",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-includepaths": "^0.2.4",

diff --git a/...Plugins/Focusable/tests/Focusable.test.js → ...lugins/Focusable/tests/Focusable.test.jsx b/...Plugins/Focusable/tests/Focusable.test.js → ...lugins/Focusable/tests/Focusable.test.jsx
@@ -3,18 +3,20 @@ import {createSandbox, waitForRequestAnimationFrame} from 'helper';
 import Draggable from '../../..';
 import Focusable from '..';
 
-const sampleMarkup = `
-  <ul class="Container">
-    <li>First item</li>
-    <li>Second item</li>
-    <li>Third item</li>
-    <li>Forth item</li>
-    <button>Fifth item</button>
-  </ul>
-  <div class="Container">
-    <div tabindex="1"></div>
-  </div>
-`;
+const sampleMarkup = (
+  <>
+    <ul className="Container">
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Forth item</li>
+      <button type="button">Fifth item</button>
+    </ul>
+    <div className="Container">
+      <div tabIndex="-1" />
+    </div>
+  </>
+);
 
 describe('Focusable', () => {
   let sandbox;

diff --git a/...gable/Plugins/Mirror/tests/Mirror.test.js → ...able/Plugins/Mirror/tests/Mirror.test.jsx b/...gable/Plugins/Mirror/tests/Mirror.test.js → ...able/Plugins/Mirror/tests/Mirror.test.jsx
@@ -19,11 +19,11 @@ import {
 } from '../MirrorEvent';
 import Draggable from '../../..';
 
-const sampleMarkup = `
+const sampleMarkup = (
   <ul>
     <li>First item</li>
   </ul>
-`;
+);
 
 describe('Mirror', () => {
   let sandbox;

diff --git a/...nsors/DragSensor/tests/DragSensor.test.js → ...sors/DragSensor/tests/DragSensor.test.jsx b/...nsors/DragSensor/tests/DragSensor.test.js → ...sors/DragSensor/tests/DragSensor.test.jsx
@@ -11,13 +11,13 @@ import {
 
 import DragSensor from '..';
 
-const sampleMarkup = `
+const sampleMarkup = (
   <ul>
-    <li class="draggable">First item</li>
-    <li class="draggable">Second item</li>
-    <li class="non-draggable">Non draggable item</li>
+    <li className="draggable">First item</li>
+    <li className="draggable">Second item</li>
+    <li className="non-draggable">Non draggable item</li>
   </ul>
-`;
+);
 
 describe('DragSensor', () => {
   let sandbox;

diff --git a/...ors/MouseSensor/tests/MouseSensor.test.js → ...rs/MouseSensor/tests/MouseSensor.test.jsx b/...ors/MouseSensor/tests/MouseSensor.test.js → ...rs/MouseSensor/tests/MouseSensor.test.jsx
@@ -10,22 +10,22 @@ import {
 
 import MouseSensor from '..';
 
-const sampleMarkup = `
+const sampleMarkup = (
   <ul>
-    <li class="draggable">
-      <div class="handle">First handle</div>
+    <li className="draggable">
+      <div className="handle">First handle</div>
       First item
     </li>
-    <li class="draggable">
-      <div class="handle">Second handle</div>
+    <li className="draggable">
+      <div className="handle">Second handle</div>
       Second item
     </li>
-    <li class="non-draggable">
-      <div class="handle">Non draggable handle</div>
+    <li className="non-draggable">
+      <div className="handle">Non draggable handle</div>
       Non draggable item
     </li>
   </ul>
-`;
+);
 
 describe('MouseSensor', () => {
   let sandbox;

diff --git a/...ors/TouchSensor/tests/TouchSensor.test.js → ...rs/TouchSensor/tests/TouchSensor.test.jsx b/...ors/TouchSensor/tests/TouchSensor.test.js → ...rs/TouchSensor/tests/TouchSensor.test.jsx
@@ -10,13 +10,13 @@ import {
 
 import TouchSensor from '..';
 
-const sampleMarkup = `
+const sampleMarkup = (
   <ul>
-    <li class="draggable">First item</li>
-    <li class="draggable">Second item</li>
-    <li class="non-draggable">Non draggable item</li>
+    <li className="draggable">First item</li>
+    <li className="draggable">Second item</li>
+    <li className="non-draggable">Non draggable item</li>
   </ul>
-`;
+);
 
 describe('TouchSensor', () => {
   let sandbox;

diff --git a/src/Draggable/tests/Draggable.test.js → src/Draggable/tests/Draggable.test.jsx b/src/Draggable/tests/Draggable.test.js → src/Draggable/tests/Draggable.test.jsx
@@ -23,16 +23,18 @@ import {
 import {Focusable, Mirror, Scrollable, Announcement} from '../Plugins';
 import {MouseSensor, TouchSensor} from '../Sensors';
 
-const sampleMarkup = `
-  <ul class="Container">
-    <li>First item</li>
-    <li>Second item</li>
-  </ul>
-  <ul class="DynamicContainer">
-    <li>First item</li>
-    <li>Second item</li>
-  </ul>
-`;
+const sampleMarkup = (
+  <>
+    <ul className="Container">
+      <li>First item</li>
+      <li>Second item</li>
+    </ul>
+    <ul className="DynamicContainer">
+      <li>First item</li>
+      <li>Second item</li>
+    </ul>
+  </>
+);
 
 describe('Draggable', () => {
   let sandbox;

diff --git a/src/Droppable/tests/Droppable.test.js → src/Droppable/tests/Droppable.test.jsx b/src/Droppable/tests/Droppable.test.js → src/Droppable/tests/Droppable.test.jsx
@@ -14,18 +14,18 @@ import Droppable, {
   DroppableStopEvent,
 } from '..';
 
-const sampleMarkup = `
-  <div class="Container">
-    <div class="Dropzone isOccupied">
-      <div class="Draggable"></div>
+const sampleMarkup = (
+  <div className="Container">
+    <div className="Dropzone isOccupied">
+      <div className="Draggable" />
     </div>
-    <div class="Dropzone"></div>
-    <div class="Dropzone isOccupied">
-      <div class="Draggable"></div>
+    <div className="Dropzone" />
+    <div className="Dropzone isOccupied">
+      <div className="Draggable" />
     </div>
-    <div class="Draggable"></div>
+    <div className="Draggable" />
   </div>
-`;
+);
 
 describe('Droppable', () => {
   let sandbox;

diff --git a/...s/ResizeMirror/tests/ResizeMirror.test.ts → .../ResizeMirror/tests/ResizeMirror.test.tsx b/...s/ResizeMirror/tests/ResizeMirror.test.ts → .../ResizeMirror/tests/ResizeMirror.test.tsx
@@ -17,17 +17,17 @@ import Draggable from '../../../Draggable';
 /* eslint-enable @typescript-eslint/ban-ts-comment */
 import ResizeMirror from '..';
 
-const sampleMarkup = `
-  <ul class="Container">
-    <li>Smaller item</li>
-  </ul>
-  <ul class="Container">
-    <li>Larger item</li>
-  </ul>
-  <ul class="Container">
-    <!-- Empty -->
-  </ul>
-`;
+const sampleMarkup = (
+  <>
+    <ul className="Container">
+      <li>Smaller item</li>
+    </ul>
+    <ul className="Container">
+      <li>Larger item</li>
+    </ul>
+    <ul className="Container">{/* Empty */}</ul>
+  </>
+);
 
 describe('ResizeMirror', () => {
   const smallerDraggableDimensions = {

diff --git a/src/Sortable/tests/Sortable.test.js → src/Sortable/tests/Sortable.test.jsx b/src/Sortable/tests/Sortable.test.js → src/Sortable/tests/Sortable.test.jsx
@@ -9,20 +9,22 @@ import {
 
 import Sortable from '..';
 
-const sampleMarkup = `
-  <ul>
-    <li>First item</li>
-    <li>Second item</li>
-    <li>Third item</li>
-    <li>Forth item</li>
-  </ul>
-  <ul>
-    <li>Fith item</li>
-    <li>Sixth item</li>
-    <li>Seventh item</li>
-    <li>Eighth item</li>
-  </ul>
-`;
+const sampleMarkup = (
+  <>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Forth item</li>
+    </ul>
+    <ul>
+      <li>Fith item</li>
+      <li>Sixth item</li>
+      <li>Seventh item</li>
+      <li>Eighth item</li>
+    </ul>
+  </>
+);
 
 describe('Sortable', () => {
   let sandbox;

diff --git a/src/Swappable/tests/Swappable.test.js → src/Swappable/tests/Swappable.test.jsx b/src/Swappable/tests/Swappable.test.js → src/Swappable/tests/Swappable.test.jsx
@@ -9,20 +9,22 @@ import {
 
 import Swappable from '..';
 
-const sampleMarkup = `
-  <ul>
-    <li>First item</li>
-    <li>Second item</li>
-    <li>Third item</li>
-    <li>Forth item</li>
-  </ul>
-  <ul>
-    <li>Fith item</li>
-    <li>Sixth item</li>
-    <li>Seventh item</li>
-    <li>Eighth item</li>
-  </ul>
-`;
+const sampleMarkup = (
+  <>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Forth item</li>
+    </ul>
+    <ul>
+      <li>Fith item</li>
+      <li>Sixth item</li>
+      <li>Seventh item</li>
+      <li>Eighth item</li>
+    </ul>
+  </>
+);
 
 describe('Swappable', () => {
   let sandbox;