Unexpected token export

[dKab]

I use react-icons in my component and when I try to render it with react-test-render I get this:

`"C:\Program Files\JetBrains\WebStorm 2016.2.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" test

another-todo@0.1.0 test C:\study\reactodo
node scripts/test.js --env=jsdom

FAIL src\components\category-tree\category-tree.component.test.js
● Test suite failed to run

C:\study\reactodo\node_modules\react-icons\fa\angle-down.js:5
export default class FaAngleDown extends React.Component {
^^^^^^
SyntaxError: Unexpected token export
  
  at transformAndBuildScript (node_modules\jest-runtime\build\transform.js:284:10)
  at Object.<anonymous> (src\components\category\category.component.js:2:44)
  at Object.<anonymous> (src\components\category-tree\category-tree.component.js:4:184)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        6.59s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.`

This is how C:\study\reactodo\node_modules\react-icons\fa\angle-down.js looks like:

let React = require('react');
let IconBase = require('react-icon-base');

export default class FaAngleDown extends React.Component {
    render() {
    return (
        <IconBase viewBox="0 0 40 40" {...this.props}>
            <g><path d="m31 16.4q0 0.3-0.2 0.5l-10.4 10.4q-0.3 0.3-0.5 0.3t-0.6-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l1.2-1.1q0.2-0.2 0.5-0.2t0.5 0.2l8.8 8.8 8.7-8.8q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.2 0.2 0.5z"/></g>
        </IconBase>
    );
    }
}

Why is export unexpected here?

This is what my test looks like:

import renderer from 'react-test-render';
import CategoryTree from './category-tree.component';
import {categories} from '../../../testing-utils/deep-nested-category-tree';
import {LIST_MODE, DETAIL_MODE} from '../category/category.component'

test('CategogryTree renders correctly', () => {
const tree = renderer.create(
	<CategoryTree categories={categories} categoriesMode={LIST_MODE} selectedCategory={'1'} todo={{}} />
).toJSON();
expect(tree).toMatchSnapshot();
});

[thymikee]

Checkout this thread: #2488

[dKab]

@thymikee Are you sure it is the same as #2488 ? It seems to be react-native related issue and mine is about react.

[thymikee]

Not the same but it looks like the reason is the same – code from react-icons doesn't get transpiled (its package.json desn't provide a "main" field, maybe that's the case), so you have to explicitly tell jest to transpile it with babel transform

[dKab]

@thymikee

so you have to explicitly tell jest to transpile it with babel transform

Sorry, would you be so kind and point me in the right direction on how to do that?

[thymikee]

For now try setting this:

"transformIgnorePatterns": [
  "node_modules/?!(react-icons)"
]

You can also check this thread on customising .babelrc: #2442 (comment)

[dKab]

I use create-react-app and it seems it stores config for jest in package.json (at least I have a propery jest there):

"jest": {
    "moduleFileExtensions": [
      "jsx",
      "js",
      "json"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
      "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
    },
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/(build|docs|node_modules)/"
    ],
    "testEnvironment": "node"
  },

But when I try to add

"transformIgnorePatterns": [
  "node_modules/?!(react-icons)"
]

it says

Error: Unknown config option "transformIgnorePatterns" with value "node_modules/?!(react-icons)". This is either a typing error or a user mistake and fixing it will remove this message.

[thymikee]

This error shouldn't have happend. Try to type it instead of copying, maybe you've copied some whitespace.
In the meantime file an issue in react-icons about missing "main" field. They're building the files on prepublish but don't link to it, so node doesn't know where to look for compiled output.

[dKab]

@thymikee

This error shouldn't have happend. Try to type it instead of copying, maybe you've copied some whitespace.

strange but the same happens when I try to add transform option.

[thymikee]

Are you trying this under jest key? Maybe it's a bug in CRA then

[dKab]

Are you trying this under jest key?

yes 😢

[ericclemmons]

I had the same issue, as I'm trying to use ./src/node_modules for internal libs.

Fix:

// .jestrc
 "transformIgnorePatterns": [
    "<rootDir>/(node_modules)/"
  ]

The default regex should have <rootDir> in it:

https://github.com/facebook/jest/blob/e6495647112781b98ff194fe34952a8139f045df/packages/jest-validate/src/__tests__/fixtures/jestConfig.js#L16

[meetbabu]

@dKab is it working for you? I have the same problem and the suggested fix is not working, tried both
"transformIgnorePatterns": [ "node_modules/?!(@swish)" ]
and
"transformIgnorePatterns": [ "<rootDir>/(node_modules)/" ]
@swish is my internal library. still getting the same error

[thymikee]

@meetbabu if you want to whitelist @swish so it gets transformed, use:

"transformIgnorePatterns": [ "<roodDir>/node_modules/(?!@swish)" ]

(?!) is a regex negative lookahead, you can go to http://regexr.com/ and tweak your regex as you like :)