Unexpected token import when using TypeScript and Jest examples #3663

TheRobBrennan · 2018-02-02T19:15:38Z

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!!

The text was updated successfully, but these errors were encountered:

lfades · 2018-02-05T23:00:10Z

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

TheRobBrennan · 2018-02-10T03:29:31Z

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 · 2018-03-03T22:00:29Z

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 · 2018-03-16T11:41:15Z

@TheRobBrennan is this still relevant?

TheRobBrennan · 2018-03-16T20:52:08Z

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

poc7667 · 2018-03-25T22:57:02Z

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

13806 · 2018-03-27T11:19:57Z

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

same

iilei · 2018-04-01T21:18:37Z

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 · 2018-04-16T14:45:26Z

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 · 2018-04-21T21:29:02Z

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

TheRobBrennan · 2018-04-21T22:35:01Z

Sure - reopened 😊

makstr · 2018-04-30T10:27:33Z

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 · 2018-05-08T17:27:30Z

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.

Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0. The steps I followed were: 1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7 2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run 3. Update the babelrc to use commonjs modules in test mode to be compatible with jest Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override. To my knowledge, this PR would help on the following issues: #3663 #4227 #4531 #4528 #4239

Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0. The steps I followed were: 1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7 2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run 3. Update the babelrc to use commonjs modules in test mode to be compatible with jest Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override. To my knowledge, this PR would help on the following issues: vercel#3663 vercel#4227 vercel#4531 vercel#4528 vercel#4239

timneutkens · 2018-12-31T00:07:29Z

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

TheRobBrennan closed this as completed Mar 16, 2018

maritz mentioned this issue Apr 16, 2018

The default export is not a React Component in page vercel/next-plugins#80

Closed

TheRobBrennan reopened this Apr 21, 2018

ngauthier mentioned this issue Jun 5, 2018

Upgrade with-jest-typescript example to next 6.0.0 #4543

Merged

timneutkens closed this as completed Dec 31, 2018

lock bot locked as resolved and limited conversation to collaborators Jan 1, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unexpected token import when using TypeScript and Jest examples #3663

Unexpected token import when using TypeScript and Jest examples #3663

TheRobBrennan commented Feb 2, 2018

lfades commented Feb 5, 2018 •

edited

Loading

TheRobBrennan commented Feb 10, 2018 via email

lxe commented Mar 3, 2018

timneutkens commented Mar 16, 2018

TheRobBrennan commented Mar 16, 2018

poc7667 commented Mar 25, 2018

13806 commented Mar 27, 2018 •

edited

Loading

iilei commented Apr 1, 2018

maritz commented Apr 16, 2018

maritz commented Apr 21, 2018

TheRobBrennan commented Apr 21, 2018

makstr commented Apr 30, 2018

zxzl commented May 8, 2018

timneutkens commented Dec 31, 2018

Unexpected token import when using TypeScript and Jest examples #3663

Unexpected token import when using TypeScript and Jest examples #3663

Comments

TheRobBrennan commented Feb 2, 2018

Expected Behavior

Current Behavior

lfades commented Feb 5, 2018 • edited Loading

TheRobBrennan commented Feb 10, 2018 via email

lxe commented Mar 3, 2018

timneutkens commented Mar 16, 2018

TheRobBrennan commented Mar 16, 2018

poc7667 commented Mar 25, 2018

13806 commented Mar 27, 2018 • edited Loading

iilei commented Apr 1, 2018

maritz commented Apr 16, 2018

maritz commented Apr 21, 2018

TheRobBrennan commented Apr 21, 2018

makstr commented Apr 30, 2018

zxzl commented May 8, 2018

timneutkens commented Dec 31, 2018

lfades commented Feb 5, 2018 •

edited

Loading

13806 commented Mar 27, 2018 •

edited

Loading