Jest test fails on dynamic import

[somysz]

Is this a bug report?

No

Did you try recovering your dependencies?

Yes

Steps to Reproduce

(Write your steps here:)

1. Create a new project with create-react-app
2. Create a new component in a new file and export it
3. In your App.js component import it using dynamic import (I am also using react-loadable for this):

const AsyncComponent = Loadable({
  loader: () => import('../views/Component' /* webpackChunkName: "My component" */),
});

4. In App.test.js (I am using enzyme) try to write a simple test:

it('renders without crashing', () => {
    const wrapper = shallow(<App />);
    expect(wrapper).toMatchSnapshot();
});

Expected Behavior

The test should pass.

Actual Behavior

Result:

src/app/App.tsx: Unexpected token (36:33)

> 36 | {...} return import('../views
                    ^

Possible solution

Allow "transform" option in jest's package.json config?

[ianschmitz]

It looks like you're using Typescript? I'm guessing via create-react-app-typescript? If so this issue belongs over there.

If this is the case I ran into the same issue, and disabling allowSyntheticDefaultImports in the tsconfig.json did the trick for me. Check out wmonk/create-react-app-typescript#214 (comment) for more info.