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

StefanoA1 commented 5 years ago

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 commented 5 years ago

@eddyerburgh

eddyerburgh commented 5 years ago

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 commented 5 years ago

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 jest@23.6.0

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

eddyerburgh commented 5 years ago

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

hoalongnatsu commented 5 years ago

@sevillaarvin thanks you, i have same problem

torressam333 commented 2 years ago

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 commented 2 years ago

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

torressam333 commented 2 years ago

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

eddyerburgh / vue-hackernews