Test Fails

[isofianos-thelist-app]

I am new to testing and I am trying to make a simple test.

import React from 'react';
import { cleanup, render } from '@testing-library/react';
import '@testing-library/jest-dom';
import SelectSearch from 'react-select-search';

afterEach(cleanup);

const options = [
  { name: 'Swedish', value: 'sv' },
  { name: 'English', value: 'en' },
  {
    type: 'group',
    name: 'Group name',
    items: [{ name: 'Spanish', value: 'es' }],
  },
];

test('<SelectSearch>', () => {
  render(
    <SelectSearch
      options={options}
      value="sv"
      name="language"
      placeholder="Choose your language"
    />
  );
  expect(true).toBeTruthy();
});

But I get the following error.

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:

    /Users/userName/Documents/application/node_modules/react-select-search/dist/esm/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as useSelect } from './useSelect';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      48 | import { cleanup, render } from '@testing-library/react';
      49 | import '@testing-library/jest-dom';
    > 50 | import SelectSearch from 'react-select-search';
         | ^
      51 |
      52 | afterEach(cleanup);
      53 |

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/UI/Input/__test__/Input.test.js:50:1)

I am using the following dependencies.

 "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.0.4",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "react-select-search": "^2.1.1"
  }

I cannot understand what is the real issue, and how it can be fixed? Thanks in advance.

[MartijnHols]

Workaround: https://github.com/tbleckert/react-select-search/issues/99

[isofianos-thelist-app]

Workaround: #99

In did it worked, for the time being, thank you very much!!!

[tbleckert]

@isofianos-thelist-app Ah yes. Depending on your setup, the esm build (default) might not work, you probably need node v14 for that. Should update the readme with information about the differences between the esm and cjs builds. Thanks @MartijnHols !

[hobofan]

For anyone stumbling upon this: This seems to have been resolved via #202. (Updating to 3.0.9 solved it for me)