Unexpected token import when using TypeScript and Jest examples

[TheRobBrennan]

I'm encountering a weird issue with either Babel or Next.js when trying to run TypeScript jest tests.

I can run the Jest test written in plain ol' JavaScript just fine, but the Footer.test.tsx file fails with an unexpected token import message:
`

PASS ./demo.test.js
FAIL components/Layout/Footer/Footer.test.tsx
● Test suite failed to run

/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)

`

Using the Next.js examples with-jest and with-typescript, I've got the following configuration in place:
// tsconfig.json { "compilerOptions": { "jsx": "react-native", "module": "commonjs", "strict": true, "target": "es2017" } }

// .babelrc { "env": { "development": { "presets": ["next/babel"] }, "production": { "presets": ["next/babel"] }, "test": { "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]] } } }

// jest.config.js module.exports = { setupFiles: ['<rootDir>/jest.setup.js'], testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'], testRegex: '\\.test\\.*', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], collectCoverageFrom: [ '!jest.setup.js', '**/*.{js,jsx,ts,tsx}', '!build/**', '!coverage/**' ] }

`// jest.setup.js
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

`

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Shouldn't I be able to run my jest test written in TSX:
`// Footer.test.tsx
import { shallow } from 'enzyme'
import { Footer } from './Footer'

describe('Footer', () => {
it('should render', () => {
const wrapper = shallow(

)
expect(wrapper).toBeDefined()
})
})
`

Current Behavior

I can run the Jest test written in plain ol' JavaScript just fine, but the Footer.test.tsx file fails with an unexpected token import message:
`

PASS ./demo.test.js
FAIL components/Layout/Footer/Footer.test.tsx
● Test suite failed to run

/Users/rob/repos/crypto-insights/src/web/components/Layout/Footer/Footer.test.tsx:3
import { shallow } from 'enzyme'
^^^^^^

SyntaxError: Unexpected token import

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)

`

Any help would be appreciated. Thanks!!

[lfades]

Next 5 just went out, can you try it out and the plugin for typescript too ?

[TheRobBrennan]

Heya. I’m experimenting with Next 5, and I have come across a few oddities. The good news is that I was able to get the typescript and scss plugins to work in dev mode… The bad? I’ve created a demo project to highlight some of those concerns: https://github.com/TheRobBrennan/demo-nextjs-v5 <https://github.com/TheRobBrennan/demo-nextjs-v5> The two big issues I’ve encountered so far are: SCSS is working for dev mode but NOT for production Redux is connected and works within the app; but it DOES NOT WORK with simple testing...why? pages/redux.test.tsx has a test that calls attention to this for the time being. Of note, I’m using the same test that worked fine in Next 4, so…something is a little different…Not sure whose domain that falls into, though. Rob Brennan | rob@therobbrennan.com Phone (360) 531-3830 Skype The.Rob.Brennan Web http://www.woatw.com http://www.therobbrennan.com

…

On Feb 5, 2018, at 3:00 PM, Luis Fernando Alvarez D. ***@***.***> wrote: Next 5 just went out, can you try it out and the plugin for typescript <https://github.com/zeit/next-plugins/tree/master/packages/next-typescript> too ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3663 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD2AGgef1VADTPN9j6QbtSnjcTkDHdcGks5tR4gIgaJpZM4R3pba>.

[lxe]

I'm running into an issue that might or might not be related to this.

I'm using mapbox-gl. Usually one would simply import the commonjs entrypoint, but instead I'm importing mapbox-gl/src using another babel-loader to transpile these files. Like so:

import MapboxMap from 'mapbox-gl/src/ui/map';

Since mapbox-gl/src is es6+flow, I configured next.config.js like so:

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /mapbox\-gl\/src\/.+\.js$/,
      loader: 'babel-loader',
      options: {
        presets: [
          'babel-preset-flow',          
          'babel-preset-env', 
        ],
        plugins: [
          'babel-plugin-static-fs',
          'babel-plugin-transform-class-properties'
        ]
      }
    });

    return config;
  }
};

running next works, but after triggering build by requesting http://localhost:3000 I get this error:

/Users/aleksey/my-project/node_modules/mapbox-gl/src/ui/map.js:30
import type {LngLatLike} from '../geo/lng_lat';
^^^^^^

SyntaxError: Unexpected token import

These import statements should have been babelified out (as seen by the intermediaries produced inside .cache: gzcat node_modules/.cache/babel-loader/a2b2aa6e1bdb254f0db2d539f7b03e24a389bbb7.json.gz | jq -r .code), but I think some webpack plugin that's loaded by next is ignoring the transpiled file, and using a require() instead.

[timneutkens]

@TheRobBrennan is this still relevant?

[TheRobBrennan]

@timneutkens I don't believe so. Everything seems to be in a great place.

[poc7667]

how closed this issue? I run into the same issue as well.

[13806]

how closed this issue? I run into the same issue as well.

same

[iilei]

same here with 6.0.0-canary.2 / node 8.11.1

Spent some time trying different versions (starting with a merge of copy+paste from examples).

e.g:

"dependencies": {
    "next": "6.0.0-canary.2",
    "react": "16.2.0",
    "react-dom": "16.2.0"
  },
  "devDependencies": {
    "@types/next": "2.4.8",
    "@types/react": "16.1.0",
    "@zeit/next-typescript": "0.1.1",
    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.0",
    "typescript": "2.8.1"
  }

No avail ...

[maritz]

The example project works fine. Trying to get it to work in an actual project always fails.

My theory: There is something wrong with the compile steps and actual compile errors get swallowed. Then afterwards it tries to use the uncompiled .tsx and fails.

[maritz]

@timneutkens @TheRobBrennan can we get this issue re-opened or should we create a new one?

[TheRobBrennan]

Sure - reopened 😊

[makstr]

I was using "with-jest-typescript" example and ran into this problem, looks like changing tsconfig.json compilerOptions.jsx from "preserve" to "react" gets the tests running, but breaks the app.

So ended up with custom tsconfig.jest.json

// tsconfig.jest.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "jsx": "react"
  }
}

and updated the test.config.js

...
  globals: {
    "ts-jest": {
      useBabelrc: true,
      tsConfigFile: "tsconfig.jest.json"
    }
  },
...

[zxzl]

Upon @makstr 's suggestion, if you face trouble resolving modules, try

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs"
  }
}

as mentioned in ts-jest doc.
The tsconfig.js 's compilerOptions is set to esnext.

[timneutkens]

Should be solved with the Next 7 rewrite of next/dynamic.