Syntax Error with Optional Chaining in Typescript 3.7

Issue :

I just upgraded a repo to use Typescript 3.7 to test out optional chaining. It compiles successfully (using webpack and @babel/preset-typescript). However when I run a test against the optional chaining syntax I get an error that Jest can’t parse it.

Expected behavior:

Test should pass as normal

Error output:

 ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    filename.tsx:30
        const isStoreOwner = () => user?.isStoreOwner;
                                        ^

    SyntaxError: Unexpected token .

Jest.config.js:

  verbose: true,
  testURL: "http://localhost/",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.jsx?$": "babel-jest",
  },

  modulePathIgnorePatterns: ["<rootDir>/script/scaffold/", "<rootDir>/.*/__mocks__"],

  testRegex: "(/app/javascript/.*(test|spec))\\.(jsx?|tsx?)$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "d.ts"],

  snapshotSerializers: ["enzyme-to-json/serializer"],

  moduleNameMapper: {
    "^.+\\.(css|scss|sass|jpg|jpeg|png|gif)$": "<rootDir>/app/javascript/helpers/fileStub.ts",
    "\\.svg": "<rootDir>/__mocks__/svgr.tsx",
  },

  setupFilesAfterEnv: ["<rootDir>/app/javascript/testing/test-setup.ts"],

package.json:

    "@babel/core": "^7.7.0",
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/plugin-proposal-decorators": "^7.7.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.7.0",
    "@babel/preset-typescript": "^7.7.0",
    "@types/enzyme": "^3.10.3",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/jest": "^24.0.21",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "^3.4.3",
    "fork-ts-checker-webpack-plugin": "^3.0.1",
    "jest": "^24.9.0",
    "ts-jest": "^24.1.0",
    "typescript": "^3.7.2",

I’m unsure which library is causing the error (ts-jest, jest, babel, etc) but this seemed like a good place to start.

[http417]

Optional chaining was added in ES2020, which isn’t supported by node yet. So if your ‘target’ compile option is ES2020 or ESNext, then typescript compiler will see an optional chaining operator and leave it alone. If your target is ES2019 or further back then typescript will transpile the feature into something that ndoe will understand . like this:

const attributeScores = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResp…

[squalsoft]

I changed tsconfig.json to have “target”: “ES2019” and this fixed same issue.