Tests failing with enzyme

Describe the bug I am not able to do shallow rendering with enzyme with the v9.0.1 of react-dnd. It was working fine with “react-dnd”: “^7.4.5”, “react-dnd-html5-backend”: “^7.4.4”, Reproduction

 FAIL  src/views/Explorer/RemoteExplorer/RemoteExplorer.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/negative0/Projects/rclone/rclone-webui-react/node_modules/react-dnd/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './common';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      2 | import axiosInstance from "../../../utils/API/API";
      3 | import {Alert, Button, Col, Container, Row, Spinner, Table} from "reactstrap";
    > 4 | import {DropTarget} from "react-dnd";
        | ^
      5 | import FileComponent from "./FileComponent";
      6 | import {ItemTypes} from "./Constants";
      7 | import {toast} from "react-toastify";

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/views/Explorer/FilesView/FilesView.js:4:1)

This is how I am attaching react-dnd to component.

export default compose(
    connect(
        mapStateToProps, {getFiles, navigateUp, changePath}
    ),
    DropTarget(ItemTypes.FILECOMPONENT, filesTarget, collect)
)(FilesView)

Compose is a function from the redux library.

Testing code:

import React from "react";
import {shallow} from "enzyme";
import {testStore} from "../../../../Utils";
import FilesView from "./FilesView";
import toJson from "enzyme-to-json";
import {wrapInTestContext} from "react-dnd-test-utils";



const setUp = (intialState = {}, props = {}) => {
    const store = testStore(intialState);
    const MyFiles = wrapInTestContext(FilesView);
    const component = shallow(<MyFiles {...props} store={store}/>);
    const manager = component.instance().getManager();
    const backend = manager.getBackend()
    return component.childAt(0).dive();
};

it('should render without crashing', function () {
            wrapper = setUp(initialState, props)
            expect(wrapper).toHaveLength(1)
});

Steps to reproduce the behavior:

1. Update react-dnd to v9.0.1
2. Run npm run test

Expected behavior The tests should pass with the new version.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: POP_OS 18.04
• Browser: Mozilla Firefox
• Version: v9.0.1

Additional context Add any other context about the problem here.

[pinkbunny1]

Since jest is not working with esmodules well, you need to add these configurations in jest.config.js

moduleNameMapper : {
        '^react-dnd$': 'react-dnd/dist/cjs',
        '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
        '^dnd-core$': 'dnd-core/dist/cjs',
}

[darthtrevino]

@andreastoyota What a PITA. So in that case my immediate recommendation would be to just replace your react-dnd dependencies with the CommonJS versions:

react-dnd => react-dnd-cjs react-dnd-html5-backend => react-dnd-html5-backend-cjs Edit: this is not necessary in the latest version