Gatsby: "SyntaxError: Unexpected string" when implementing unit testing guide on stock blog starter

[ebello]

Description

I am receiving an error when running yarn test after installing the gatsby-starter-blog and going through the Unit testing guide. The error I receive is:

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.date.to-json";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

Steps to reproduce

I have a demo repo here: gatsby-starter-blog-jest-error

1. Clone gatsby-starter-blog-jest-error
2. yarn
3. yarn test

Expected result

I should receive the SyntaxError: Invalid or unexpected token for import 'typeface-montserrat' as referenced in the guide.

Actual result

I receive an error relating to babel not being able to transform the test file. It seems to be a regression from this commit: 2788f93ee86c710a7a92437e02abfe23decb24ac. If I revert the babelOptions back to the following, I get the expected result above.

const babelOptions = {
  presets: ["@babel/react", "@babel/env"],
  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
  ],
};

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 57.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.35 
    gatsby-plugin-feed: ^2.0.8 => 2.0.9 
    gatsby-plugin-google-analytics: ^2.0.5 => 2.0.7 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.7 
    gatsby-plugin-offline: ^2.0.5 => 2.0.10 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.6 => 2.0.10 
    gatsby-plugin-typography: ^2.2.0 => 2.2.1 
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.6 
    gatsby-remark-images: ^2.0.4 => 2.0.5 
    gatsby-remark-prismjs: ^3.0.0 => 3.0.3 
    gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.6 
    gatsby-remark-smartypants: ^2.0.5 => 2.0.6 
    gatsby-source-filesystem: ^2.0.2 => 2.0.6 
    gatsby-transformer-remark: ^2.1.6 => 2.1.11 
    gatsby-transformer-sharp: ^2.1.3 => 2.1.7 
  npmGlobalPackages:
    gatsby-cli: 2.4.4

[kakadiadarpan]

It seems to be a regression from this commit: 2788f93.

This commit implements babel-preset-gatsby, which does the same thing as below:

const babelOptions = {
  presets: ["@babel/react", "@babel/env"],
  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
  ],
};

I'm able to reproduce this issue, but I'm not sure why this is causing the problem.

@pieh any ideas regarding this?

[DSchau]

@ebello @kakadiadarpan I'll check this out right now!

[ebello]

Excellent, thank you @DSchau!