TypeError: Cannot read property 'lang' of null

[chlab]

I am trying out your webpack template to use jest for unit testing in a new little app and am getting this error when running npm run unit:

 FAIL  test/unit/specs/App.spec.js
  ● Test suite failed to run

    TypeError: Cannot read property 'lang' of null

      at processScript (node_modules/jest-vue/lib/process.js:13:17)
      at Object.module.exports [as process] (node_modules/jest-vue/lib/process.js:27:18)
      at Object.<anonymous> (test/unit/specs/App.spec.js:1:114)

I reduced the file to an absolute minimum and I'm still getting the error.

App.spec.js

import App from '@/App'

App.vue

<template>
  <div id="app">
  </div>
</template>

package.json

...
"jest": "^21.2.0",
"jest-vue": "^0.7.0",
...

This is the offending line in jest-vue/lib/process.js:

function processScript (scriptPart) {
  if (scriptPart.lang === 'typescript' || scriptPart.lang === 'ts') {

Which seems to make sense since I do not define a lang attribute on my script tags.

[eddyerburgh]

Hi, thanks for the bug report

I downloaded the webpack repo and failed to reproduce the issue. Would you be able to post the test file and component where you're getting this error, or even better post a reproduction repo?

[mikemenaker]

I ran into this issue as well.

I resolved it by changing the function process.js to:

function processScript (scriptPart) {
  if(scriptPart != null && scriptPart.hasOwnProperty("lang")) {
    if (scriptPart.lang === 'typescript' || scriptPart.lang === 'ts') {
      return compileTypescript(scriptPart.content)
    }

    if (scriptPart.lang === 'coffee' || scriptPart.lang === 'coffeescript') {
      return compileCoffeeScript(scriptPart.content)
    }

    return compileBabel(scriptPart.content)
  }

  return compileBabel(null)
}

I can make a pull request with this change or you might want to handle it a different way.

[eddyerburgh]

I would appreciate a PR, and ideally a unit test with a case that fails. Thanks 🙂

[mikemenaker]

Cool, should have something today or tomorrow.

I think this issue popped up because I was using functional SFC with no script section (just a template).

[mikemenaker]

Looks like this will handle the issue I ran into:
#17

Any idea when a new release will go out?

Thanks!

[eddyerburgh]

I've just released in 1.0.0 vue-jest.

Note I've changed the package name to vue-jest. You can still download jest-vue, but it won't be receiving further updates.

To install the new version:

npm install --save-dev vue-jest

I made a request to the original owner of vue-jest to transfer ownership to this repository so that the package name could be more idiomatic to other preprocessors like babel-vue and ts-vue.

[agualis]

@mikemenaker @chlab I confirm that SFC with no script section do work with version 1.0.0 vue-jest

But you need to define the template as <template functional>

[agualis]

There was another problem when testing nested functional components with mount. This pull request solves the issue:
#22

[chlab]

@eddyerburgh sorry for the late reply.

This is the repo that I'm encountering these problems. It has one unit test. I'm no longer seeing the lang error, but I'm still seeing the problems described in the PR.

Do you mind having a quick look? Can you run npm run unit without any problems?

Thanks!

[caioincau]

I am having the same problem here :(, the lang one.

[eddyerburgh]

@icaioincau is this fixed for you in 1.0.1? If not, can you post the error?

[agualis]

Oh! I had oversimplified the parsing of the funcional templates and had forgotten some cases like passing a function or an array as props.

I just updated the pull request and I hope that this solves most of the common issues but more edge cases should arise so I'll keep an eye on this.

@eddyerburgh Sorry for the inconvenience, could you run a new release and test it with some complex functional templates please?

[eddyerburgh]

I've released the changes in 1.0.2

[agualis]

Cool! I have a project with different funcional components and it works. Let's see if we find new edge cases. Thanks for the release!

[caioincau]

Hi @eddyerburgh my components is this:

<template>
  <section class="error-page__partial">
    <h1 class="error-page__main-title"> {{ $t('i18n.private') }} </h1>
    <h3>Lorem Ipsum at dolor sit amen</h3>
  </section>
</template>

He is on a main component that has a script.

<template>
  <section class="error-page" :class="modifiers">
    <div>
      <h1 class="error-page__main-title"> {{ $t('i18n.private') }} </h1>
      <h3 v-html="$t('i18n.private')"></h3>
    </div>
    <partial></partial> <!-- Here -->
  </section>
</template>

The error:

    TypeError: Cannot read property 'lang' of null

      at processScript (node_modules/jest-vue/lib/process.js:13:17)
      at Object.module.exports [as process] (node_modules/jest-vue/lib/process.js:27:18)
      at src/views/ErrorPage/ErrorPage.vue:8:14
      at Object.<anonymous> (src/views/ErrorPage/ErrorPage.vue:106:3)

Version used: 1.0.2

[agualis]

@icaioincau Try again changing your template to <template functional>...</template>

[caioincau]

It worked :D

[wienska]

Hi! I've still got error with 'lang' in 1.0.2 version. Any way to fix it without adding functional to template?

[eddyerburgh]

@Ca4tkin can you post the SFC that you're getting the error with?

[wienska]

@eddyerburgh, here it is:

<template>
  <footer class="footer">I'm footer!</footer>
</template>

<style>
.footer {
  padding: 15px;
  border: 1px dashed red;
  text-align: center;
  margin-top: 30px;
}
</style>

[eddyerburgh]

Thanks for posting the component @Ca4tkin 😀

I've pushed a fix in 1.0.3

[maxmilton]

Thanks @eddyerburgh 1.0.3 fixed the issue in my projects.

[wienska]

@eddyerburgh thanks! It's fixed