Add CJS bundles to core libs for testing, provide better Jest guidance (

#1460)

* test: add cjs to the distributions so that we can give better prescriptions for testing with jest

* test: add a note about using the modulenamemapper when testing in Jest

babel.config.cjs.js

@@ -0,0 +1,19 @@
+module.exports = {
+	presets: [
+		'@babel/preset-typescript',
+		'@babel/preset-react',
+		[
+			'@babel/preset-env',
+			{
+				modules: 'cjs',
+				targets: {
+					browsers: ['>0.25%, not dead'],
+				},
+			},
+		],
+	],
+	plugins: [
+		'@babel/proposal-class-properties',
+		'@babel/proposal-object-rest-spread',
+	],
+}

package.json

@@ -108,12 +108,12 @@
 			"<rootDir>/packages/testing/"
 		],
 		"moduleNameMapper": {
-			"^dnd-core$": "<rootDir>/packages/core/dnd-core/src",
-			"^react-dnd$": "<rootDir>/packages/core/react-dnd/src",
-			"^react-dnd-html5-backend$": "<rootDir>/packages/core/html5-backend/src",
-			"^react-dnd-touch-backend$": "<rootDir>/packages/core/touch-backend/src",
-			"^react-dnd-test-backend$": "<rootDir>/packages/testing/test-backend/src",
-			"^react-dnd-test-utils$": "<rootDir>/packages/testing/test-utils/src"
+			"^dnd-core$": "dnd-core/dist/cjs",
+			"^react-dnd$": "react-dnd/dist/cjs",
+			"^react-dnd-html5-backend$": "html5-backend/dist/cjs",
+			"^react-dnd-touch-backend$": "touch-backend/dist/cjs",
+			"^react-dnd-test-backend$": "react-dnd-test-backend/dist/cjs",
+			"^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
 		},
 		"collectCoverageFrom": [
 			"packages/core/**/*.{ts,tsx}",

packages/core/react-dnd/src/decorators/__tests__/ConnectorFunctions.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { mount } from 'enzyme'
 import { wrapInTestContext } from 'react-dnd-test-utils'
-import { DropTarget } from '../DropTarget'
+import { DropTarget } from 'react-dnd'
 
 describe('Connectors', () => {
 	it('transmit expected arguments to components', () => {

packages/documentation/docsite/markdown/docs/00 Quick Start/Testing.md

@@ -13,6 +13,21 @@ There are several different approaches to testing React components. React DnD is
 
 A few test examples are included with the React DnD inside its `examples` folder. Run `yarn` and `yarn test` inside the `react-dnd` root folder to start them.
 
+## Setup
+
+If you are using Jest, you may need to configure Jest's `moduleNameMapper` settings. Jest does not work well with ES Modules yet, but you can easily instruct it to use the CommonJS builds of the react-dnd libraries.
+
+```json
+"moduleNameMapper": {
+  "^dnd-core$": "dnd-core/dist/cjs",
+  "^react-dnd$": "react-dnd/dist/cjs",
+  "^react-dnd-html5-backend$": "html5-backend/dist/cjs",
+  "^react-dnd-touch-backend$": "touch-backend/dist/cjs",
+  "^react-dnd-test-backend$": "react-dnd-test-backend/dist/cjs",
+  "^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
+}
+```
+
 ### Testing the Components in Isolation
 
 If you are only interested in testing the _rendering_ of your components in isolation, and not their interaction, you may use the `DecoratedComponent` static property available on any class wrapped with React DnD to access the original class. You may then test it with the different props without any dependency on React DnD, supplying an identity function to stub the connector methods.

scripts/build_package.sh

@@ -1,4 +1,5 @@
 #!/bin/sh
 npx babel --config-file=../../../babel.config.js src --ignore="src/**/__tests__/**" --out-dir lib --extensions '.ts,.tsx' &
+npx babel --config-file=../../../babel.config.cjs.js src --ignore="src/**/__tests__/**" --out-dir dist/cjs --extensions '.ts,.tsx' &
 npx tsc &
 wait