Lifecycle Helpers Not Working with Jest

[rathwell]

I'm submitting a bug report

• Library Version: 1.0.0-beta.3.0.1

• Operating System: Windows 10

• Node Version: 6.11.2

• NPM Version: 3.10.10

• JSPM OR Webpack AND Version webpack 3.5.5

• Browser: all

• Language: ESNext

Current behavior: The lifecycle helpers do not work with Jest (at least in my setup).

When running Jest with the "node" testEnvironment setting, 'waitFor', 'waitForDocumentElement', etc., tests fail due to the error "NodeList is not defined" (understandable due to no dom being present).

When running Jest with the "jsdom" testEnvironment setting, I get the following stack trace, which seems to indicate either an error in aurelia-templating or in jsdom:

Uncaught promise rejection:
TypeError: Cannot read property 'getFileName' of undefined
    at Function.write (C:\Code\scratch\foo-test\node_modules\jest-cli\build\lib\BufferedConsole.js:34:24)
    at BufferedConsole.error (C:\Code\scratch\foo-test\node_modules\jest-cli\build\lib\BufferedConsole.js:52:21)
Uncaught promise rejection:
TypeError: First argument to Node.prototype.insertBefore must be a Node
    at HTMLUnknownElementImpl.insertBefore (C:\Code\scratch\foo-test\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:171:13)
    at HTMLUnknownElementImpl.appendChild (C:\Code\scratch\foo-test\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:334:17)
    at HTMLUnknownElement.appendChild (C:\Code\scratch\foo-test\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\generated\Node.js:132:57)
    at View.appendNodesTo (C:\Code\scratch\foo-test\node_modules\aurelia-templating\dist\commonjs\aurelia-templating.js:1504:12)
    at HtmlBehaviorResource.create (C:\Code\scratch\foo-test\node_modules\aurelia-templating\dist\commonjs\aurelia-templating.js:4081:29)
    at applyInstructions (C:\Code\scratch\foo-test\node_modules\aurelia-templating\dist\commonjs\aurelia-templating.js:2184:31)
    at ViewFactory.create (C:\Code\scratch\foo-test\node_modules\aurelia-templating\dist\commonjs\aurelia-templating.js:2405:7)
    at TemplatingEngine.enhance (C:\Code\scratch\foo-test\node_modules\aurelia-templating\dist\commonjs\aurelia-templating.js:4834:24)
    at C:\Code\scratch\foo-test\node_modules\aurelia-framework\dist\commonjs\aurelia-framework.js:174:28
    at Aurelia.enhance (C:\Code\scratch\foo-test\node_modules\aurelia-framework\dist\commonjs\aurelia-framework.js:172:12)

I am assuming this error is originating in the StageComponent.WithResources().InView() call.

Expected/desired behavior:

I would like the aurelia-testing lifecycle helpers to work with Jest.

I have a minimal repro linked below. The test that illustrates the issue is in 'test/unit/somedir/foo.spec.js'.

https://github.com/rathwell/aurelia-jest-errors/blob/master/test/unit/somedir/foo.spec.js

• What is the expected behavior?

See above.

• What is the motivation / use case for changing the behavior?

I would like to be able to use the Aurelia lifecycle testing helpers in our unit tests with Jest.

EDIT: Removed references to Karma/Webpack, as I was able to get that working.

[dweber019]

@rathwell could you tell me how you resolved this error:

TypeError: First argument to Node.prototype.insertBefore must be a Node

[Alexander-Taran]

@dweber019 by manually upgrading "aurelia-pal-nodejs": "^1.0.0-beta.3.0.0",

[rathwell]

@dweber019 I actually gave up on Jest because after getting past the main issues in this ticket, we hit additional issues when testing ag-grid-aurelia. I did get it mostly working with straight aurelia, but still needed to occasionally rebind in places where is was not necessary to do so with Karma.

Unfortunately, I can't remember exactly what changes I made since we didn't end up going that route. I started with a minimal project and was able, as I mentioned, to get it mostly working. Then compared to my actual project to see what was different. I can't remember much more than that.

[dweber019]

@Alexander-Taran & @rathwell thanks for your responses. I made it work in my repo https://github.com/w3tecch/aurelia-typescript-boilerplate. Hopefully for bigger scenarios.

[Alexander-Taran]

Oh the irony, now I got to the same issue (-: It comes down to line

var found = element !== null && (!(element instanceof NodeList) &&

and NodeList is not there

[baixiaoji]

when I upgrade node@12, having the same error

[3cp]

@baixiaoji did you try upgrading all deps to latest? Especially aurelia-pal-nodejs v2.0.0.

[baixiaoji]

@3cp I did not having the aurelia-pal-nodejs dep, and my jest@24.8

[3cp]

Do you have import {globalize} from 'aurelia-pal-nodejs'; in test/jest-pretest.js?

[baixiaoji]

nope

[3cp]

Your app is probably not created by aurelia-cli. Pls show your package.json.

[baixiaoji]

 "dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
    "@xunlei/vue-lazy-component": "^1.1.3",
    "area-data": "^5.0.6",
    "axios": "^0.18.0",
    "copy-text-to-clipboard": "^1.0.4",
    "decimal.js": "^10.0.1",
    "echarts": "^4.1.0",
    "element-ui": "^2.5.4",
    "iview": "^3.3.3",
    "lodash": "^4.17.10",
    "moment": "^2.24.0",
    "pdfjs-dist": "^2.0.943",
    "qrcode": "^1.2.2",
    "qs": "^6.5.2",
    "qs-url": "^1.0.3",
    "quill": "^1.3.7",
    "store": "^2.0.12",
    "vue": "^2.5.17",
    "vue-area-linkage": "^5.0.1",
    "vue-class-component": "^6.0.0",
    "vue-infinite-loading": "^2.4.3",
    "vue-lazyload": "^1.2.6",
    "vue-property-decorator": "^7.0.0",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.17.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1",
    "vuex-router-sync": "^5.0.0",
    "xlsx": "^0.15.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@vue/cli-plugin-babel": "^3.0.0",
    "@vue/cli-plugin-eslint": "^3.0.0",
    "@vue/cli-plugin-typescript": "^3.0.0",
    "@vue/cli-service": "^3.0.0",
    "@vue/eslint-config-airbnb": "^3.0.1",
    "@vue/eslint-config-typescript": "^3.0.1",
    "@vue/test-utils": "^1.0.0-beta.30",
    "add-asset-html-webpack-plugin": "^3.1.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^24.8.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^1.0.1",
    "copy-webpack-plugin": "^5.0.1",
    "happypack": "^5.0.1",
    "jest": "^24.8.0",
    "jest-transform-stub": "^2.0.0",
    "jest-watch-typeahead": "^0.4.2",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "lint-staged": "^7.2.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.1.0",
    "shared-worker-loader": "^0.2.0",
    "speed-measure-webpack-plugin": "^1.3.3",
    "typescript": "^3.0.0",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.7.0",
    "webpack-cli": "^3.3.11"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ]
  }

[3cp]

You were asking a vue issue in aurelia... it's wrong place...