Chapter 2: Test suite failed to run due to: SyntaxError: Unexpected token {

[StefanoA1]

PROBLEM:

I'm following the book I bought via the Manning website (Testing Vue.js Applications), so far so great with the explanations but I experienced a problem in the 2th chapter, because of the following:

 FAIL  src/components/__tests__/Item.spec.js
  ● 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:

    /home/stefano/lab/testingVueApps/vue-hackernews/src/components/__tests__/Item.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount } from '@vue/test-utils';
                                                                                                    ^

    SyntaxError: Unexpected token {

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

Steps to reproduce:

Use a linux distro (I'm using ubuntu 18.04.2 right now, but happens the same with version 16.04)
Install npm with nvm (I've done it several times for other apps and didn't encounter any problem with npm packages)
Clone your repo, checkout to chapter-2 branch
Just follow the book instructions until chapter 2.

Already tried with:

(I did follow step by step the instructions, carefully adding the transforms for jest in the package.json)
Checking that the package.json has the same versions as your repo.

• result: same error
  Using newer versions for jest related libraries
• result: same error

For, the record, the first sanity check didn't pass until I followed the steps that were only explained later on (adding additional dependencies and mods to the package.json).

The only thing that works is to completely ignore chapter 2 instructions, checkout to chapter-2 branch but replace the package.json with chapter-3 version, run a npm install and there you go, by the way the repo could use updated versions for Vue and Vue templates (at least version 2.5.18+ because vue test utils complains due to the sync mode)

Thanks for taking a look, btw I love the explanations of the book.

(Probable) Typos found:

chapter 5:

• Listing 5.2 Triggering a test by dispatching a DOM event: missing matching { in line 3

chapter 6:

• 6.2 ....This can happen in a Vuex (Vue?) application when two components have their own state
  for the same data. State changes..

[StefanoA1]

@eddyerburgh

[eddyerburgh]

Hi Stefano, thank you for your detailed report. As you have found, since publication there have been problems with chapter 2, mainly because the packages aren't locked to a specific version. This was a mistake on my part—I should have asked readers to install specific versions to avoid future problems. I'm going to add an errata to fix this. I'll also add an errata to fix the syntax errors you have found. Sorry for the mistakes in the code.

[sevillaarvin]

Running npm install --save-dev jest and npm run test:unit, where test:unit: jest --no-cache, gives the following error:

ReferenceError: Unknown option: .caller. Check out http://babeljs.io/docs/usage/options/ for more information about options.

Installing the specific version solves the problem npm install --save-dev [email protected]

https://manning-content.s3.amazonaws.com/download/b/921f670-42b2-4adb-ab94-70efb8bbf428/Yerburgh_Testingue.jsApplications_Err1.html

[eddyerburgh]

Thanks, again I'm sorry for these problems. I should have specified a version in the original text

[hoalongnatsu]

@sevillaarvin thanks you, i have same problem

[torressam333]

Do you have the starting code for this book? I only see the completed project that isn't broken out into chapters when following along in the book.

[eddyerburgh]

@torressam333 you need to change branches. Each chapter X's starter code is at branch chapter-X

[torressam333]

@eddyerburgh yes thank you. IDK why but I was confusing branches with directories. My bad. Thank you, sir.