wmonk / create-react-app-typescript

DEPRECATED: Create React apps using typescript with no build configuration.
3.7k stars 492 forks source link

Unit tests are failing when using dynamic imports #359

Open rolandjitsu opened 6 years ago

rolandjitsu commented 6 years ago

Is this a bug report?

Yes.

Can you also reproduce the problem with npm 4.x?

Yes.

Which terms did you search for in User Guide?

Unexpected token, Unexpected token import, dynamic import

Environment

  1. npm ls react-scripts-ts (if you haven’t ejected): 2.16.0
  2. node -v: 8.11.2
  3. npm -v: 5.6.0
  4. yarn --version (if you use Yarn): 1.7.0
  5. npm ls react-scripts-ts (if you haven’t ejected):

Then, specify:

  1. Operating system: macOS Sierra
  2. Browser and version (if relevant): Chrome

Steps to Reproduce

Go to cra-workspaces#dynamic-import:

  1. Clone repo
  2. Run yarn install from root
  3. Run yarn test

NOTE: Use yarn start to run the app and confirm it actually works.

Expected Behavior

Tests would pass without errors.

Actual Behavior

Tests are failing with:

/Users/rolandjitsu/Projects/cra-workspaces/apps/cra/src/app.tsx: Unexpected token (5:33)
        3 | import Loadable from 'react-loadable';
        4 | var DynamicComponent = Loadable({
      > 5 |     loader: function () { return import('./dynamic'); },
          |                                  ^
        6 |     loading: function () { return React.createElement("span", null, "Loading ..."); }
        7 | });
        8 | var App = /** @class */ (function (_super) {

Reproducible Demo

See cra-workspaces#dynamic-import and use instructions above to reproduce.

ianschmitz commented 6 years ago

Try disabling allowSyntheticDefaultImports in your tsconfig.json if you have it enabled

topaxi commented 6 years ago

This was fixed in ts-jest https://github.com/kulshekhar/ts-jest/issues/258#issuecomment-410236002. I tried to get it upgraded locally in react-scripts-ts but failed, maybe I'm missing something as I'm pretty new to the whole ecosystem.