From bcbaac518e526d1a850f2416673127ccb09797f7 Mon Sep 17 00:00:00 2001 From: Nick Gauthier Date: Wed, 6 Jun 2018 04:31:21 -0400 Subject: [PATCH] Upgrade with-jest-typescript example to next 6.0.0 (#4543) 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 --- examples/with-jest-typescript/.babelrc | 33 +++++++++++++++++--- examples/with-jest-typescript/jest.config.js | 7 +---- examples/with-jest-typescript/package.json | 11 ++++--- 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/examples/with-jest-typescript/.babelrc b/examples/with-jest-typescript/.babelrc index f1ced417a8813..37de2b50cf77c 100644 --- a/examples/with-jest-typescript/.babelrc +++ b/examples/with-jest-typescript/.babelrc @@ -1,6 +1,29 @@ { - "presets": [ - "next/babel", - "@zeit/next-typescript/babel" - ] -} \ No newline at end of file + "env": { + "development": { + "presets": [ + "next/babel", + "@zeit/next-typescript/babel" + ] + }, + "production": { + "presets": [ + "next/babel", + "@zeit/next-typescript/babel" + ] + }, + "test": { + "presets": [ + [ + "next/babel", + { + "preset-env": { + "modules": "commonjs" + } + } + ], + "@zeit/next-typescript/babel" + ] + } + } +} diff --git a/examples/with-jest-typescript/jest.config.js b/examples/with-jest-typescript/jest.config.js index a839f1d1e7887..bb88ced3b7f59 100644 --- a/examples/with-jest-typescript/jest.config.js +++ b/examples/with-jest-typescript/jest.config.js @@ -2,14 +2,9 @@ const TEST_REGEX = '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$' module.exports = { setupFiles: ['/jest.setup.js'], - globals: { - 'ts-jest': { - 'useBabelrc': true - } - }, testRegex: TEST_REGEX, transform: { - '^.+\\.tsx?$': 'ts-jest' + '^.+\\.tsx?$': 'babel-jest' }, testPathIgnorePatterns: [ '/.next/', '/node_modules/' diff --git a/examples/with-jest-typescript/package.json b/examples/with-jest-typescript/package.json index cc31316d15453..3be35d389748d 100644 --- a/examples/with-jest-typescript/package.json +++ b/examples/with-jest-typescript/package.json @@ -2,28 +2,29 @@ "name": "with-jest-typescript", "version": "1.0.0", "scripts": { - "test": "NODE_ENV=test jest", + "test": "jest", "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { - "next": "^5.0.0", + "next": "^6.0.0", "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { - "@types/jest": "^22.2.2", + "@types/jest": "^23.0.0", "@types/next": "^2.4.8", "@types/react": "^16.0.41", "@types/react-dom": "^16.0.4", "@zeit/next-typescript": "1.0.1", + "babel-core": "^7.0.0-bridge.0", + "babel-jest": "23.0.1", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", - "jest": "^22.4.3", + "jest": "^23.1.0", "react-addons-test-utils": "^15.6.2", "react-test-renderer": "^16.2.0", - "ts-jest": "^22.4.2", "typescript": "^2.7.2" } }