Nuxt.js: Spread operator can not be used for props array in jest

[deerboy]

Version

v2.4.5

Reproduction link

https://codesandbox.io/s/github/deerboy/nuxt-jest-spread-operator-bug

Steps to reproduce

• init nuxt project by cli
• edit Logo.vue (use spread operator for props array)
• run test
• error

Logo.vue

export default {
  props: {
    demoArray: {
      type: Array,
      required: true
    }
  },

  mounted() {
    console.log([...this.demoArray, ...this.demoArray])
  }
}

Logo.spec.js

describe('Logo', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Logo, {
      propsData: {
        demoArray: []
      }
    })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

$ jest
 FAIL  test/Logo.spec.js
  ● Test suite failed to run

    /Users/daichininomiya/Downloads/jest-spread-operator/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import arrayWithoutHoles from "./arrayWithoutHoles";
                                                                                                    ^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

       9 | 
      10 | <script>
    > 11 | export default {
         |                                     ^
      12 |   props: {
      13 |     demoArray: {
      14 |       type: Array,

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at components/Logo.vue:11:50
      at Object.<anonymous> (components/Logo.vue:34:3)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.971s
Ran all test suites.
error Command failed with exit code 1.

What is expected ?

complete test.

What is actually happening?

@babel runtime error

Additional comments?

• Worked on plain Vue project (vue-cli) - Vue add jest

_{This bug report is available on Nuxt community (#c8763)}

[aldarund]

Its nothing about nuxt itself.
Updating jest to 24.1 fixes the issue
https://codesandbox.io/s/kw746w1pxo

[deerboy]

Thank you for your reply. But the same error still appears.

1. I made your sandbox clone & yarn install.
2. yarn test
3. Same error
   Do you not get an error even through the same flow?

[aldarund]

@deerboy it work for me. Can u try to remove "@nuxt/babel-preset-app" from babelrc and remove lock file and reinstall and see if it helps

[deerboy]

I clone your sandbox and tried the following, but it does not move yet.

1. rm -rf node_modules
2. deleted @ nuxt / babel-preset-app from babelrc
3. rm yarn.lock
4. yarn cache clean
5. yarn install
6. yarn test

node - v11.10.0
mac - Mojave (10.14.3)
yarn - 1.13.0
npm - 6.7.0

Apparently it seems that an error occurs when treating arrays via props or computed with spread operators. There is no error with spread merging of statically declared arrays.

[aldarund]

@deerboy there was update in jest to 24.3.0 . Maybe it will fix error for you?
Here how it works on CBS -> https://i.imgur.com/fe1eSrD.png

[deerboy]

@aldarund
Thank you for working on the problem. :)

It is still not good. There is no spread operator in your sandbox. If you add the following code to Logo.vue and test it, you should get the title error, will not you go out?

  mounted() {
    console.log([...this.demoArray]);
  }

The problem is that even in the nuxt environment immediately after initialization with CIL, an error occurs when the spread operator is involved in props, computed.

Since the test has no effect on the use of a simple spread operator, we expect that Jest and Nuxt are incompatible with each other.

In plain Vue (CLI generation), the tests ran successfully even if you used the spread operator in props or computed.

---

A similar error also appears in the teammate's environment.

[aldarund]

@deerboy i have updated that CBS with your mounted function and updated jest to latest. Work fine
https://i.imgur.com/bgoMgjJ.png
Can u try to clone it again and run? If that still dont work try to update vue-jest to v4.0.0-beta.2
Nuxt project for jest is same as plain vue. There nothing specific to nuxt when u run it via jest

[deerboy]

@aldarund
solved! Since @nuxt/babel-preset-app remained in .baberc, it worked correctly by deleting it and setting it as yarn test --no-cache. Testing with @nuxt/babel-preset-app will cause an error again, so it seems that there is a problem with @nuxt/babel-preset-app.

Also debugging While testing - without attaching --no-cache was also delaying problem solving.

Thank you very much for your support!

[aldarund]

@deerboy it was removed in latest create nuxt app. And i removed it in provided CBS :) Glad that u solved it

[deerboy]

@aldarund
Thanks! :)