Running into a problem with Jest unit tests

[rsegrest]

I am using react-keyed-file-browser with an existing project. We are required to do unit test coverage, but when I import FileBrowser I get the following Jest error:

SyntaxError: Cannot use import statement outside a module

I was able to resolve the error by changing the file name of react-keyed-file-browser/index.js to 'index.mjs' indicating that it is an external module.

Is there another way to resolve this issue, or could you change the filename in the repo?

Thanks

[scaredcat]

Testing components that are wrapped in react-dnd (such as our file browser component) is a bit tricky due to the dependencies on browser functionality. You can have a look here https://react-dnd.github.io/react-dnd/docs/testing for suggestions on how to test it.

[jestrickler]

So, I worked my way past the dnd problems with jest moduleNameMapper: https://github.com/react-dnd/react-dnd/blob/2a50f87553676c770704f059244d1de8c4b5fc83/packages/documentation/docsite/markdown/docs/00%20Quick%20Start/Testing.md#setup

But I'm now hitting an issue with the react-keyed-file-browser itself:

TypeError: Object(...) is not a function

  1 | import React from 'react';
  2 | import './App.css';
> 3 | import FileBrowser from 'react-keyed-file-browser'
    | ^

This is just trying to get a tests to run, haven't got to functionality.

React-dnd seems to have worked through these issues (as I had to find the archive above for instruction) and https://react-dnd.github.io/react-dnd/docs/testing now claims 'React DnD is test-friendly. The whole drag and drop interaction, including the rendering of your components, as well as the side effects you perform in response to the drag and drop events, can be tested.'

Anywho... any thoughts on getting around the error related to the react-keyed-file-browser?

Btw, this is a great component! Thanks!! Don't let that be lost amongst these issues!

[jestrickler]

I've gotten past those issues with the following:

  "jest": {
    "moduleNameMapper": {
      "^dnd-core$": "dnd-core/dist/cjs",
      "^react-dnd$": "react-dnd/dist/cjs",
      "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
      "^react-keyed-file-browser$": "react-keyed-file-browser/src"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-keyed-file-browser)/)"
    ]
  }

which is subbing in the dnd modules, and subbing in react-keyed-file-browser/src and allowing jest to transpile it (at least that's my intention), but that results in:

    SyntaxError: /Users/stri40/Development/react-browser-test/node_modules/react-keyed-file-browser/src/browser.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (801:1):

      799 | }
      800 | 
    > 801 | @DragDropContext(HTML5Backend)
          | ^
      802 | class FileBrowser extends RawFileBrowser { }
      803 | 
      804 | export default FileBrowser

And I ran upon some information on the subject from Mr Dan Abramov: facebook/create-react-app#4648

I like this component and I don't mean to sound ungrateful, but you should be able to install/import it into a CRA app and run your local tests.

I verified I can avoid all the configuration, and the tests will run with earlier versions (1.6.1 - 1.8.0), but not with ^1.9.0.

[derekzernach]

got it to work by adding this...i also had to put my babel config into a babel.config.js file

"transformIgnorePatterns": [
      "/node_modules/react-keyed-file-browser/node_modules/(?!react-dnd-html5-backend|react-dnd).+\\.js$"
    ]

[harsh-tamr]

None of the changes mentioned above worked for me, can this be resolved by updating the react-dnd dependency? I have typescript thrown into the mix along with babel and jest.

[dreadera]

This issue should be now sorted with the removal decorators and also the updated dependencies. Feel free to re-open if the issue persists :)