I recently upgraded the typescript version from 3.7 into 4.2 and the test code has some issues to import modules, so that all test suites fail before even starting.
I am using jest with typescript and the test suite fails to run because of:
● Test suite failed to run
ReferenceError: self is not defined
6 | import "whatwg-fetch"; // Polyfill to use fetch (and Headers, Request) inside of node
7 |
> 8 | import "mutationobserver-shim"; // Polyfill for the MutationObserver class
| ^
9 |
10 | import memoize from "memoize-one";
11 | // import "isomorphic-fetch";
at node_modules/whatwg-fetch/dist/fetch.umd.js:8:40
at Object.<anonymous>.support.searchParams (node_modules/whatwg-fetch/dist/fetch.umd.js:2:66)
at Object.<anonymous> (node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
at Object.<anonymous> (src/test/setup.ts:8:1)
The dev dependencies look like:
package.json
"devDependencies": {
"@jest/types": "^27.0.6",
"@svgr/webpack": "^5.4.0",
"@types/base64-js": "^1.3.0",
"@types/content-disposition": "^0.5.2",
"@types/core-js": "^2.5.3",
"@types/deep-equal": "1.0.1",
"@types/detect-it": "^2.1.0",
"@types/draft-js": "0.11.1",
"@types/enzyme": "^3.9.1",
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/enzyme-to-json": "^1.5.3",
"@types/htmlparser2": "3.10.0",
"@types/isomorphic-fetch": "^0.0.35",
"@types/jest": "^26.0.24",
"@types/js-beautify": "^1.8.2",
"@types/jsdom": "^12.2.3",
"@types/jsonwebtoken": "^8.3.2",
"@types/lodash": "^4.14.160",
"@types/memoize-one": "5.1.2",
"@types/node": "^10.17.28",
"@types/query-string": "^6.3.0",
"@types/react": "*",
"@types/react-dom": "16.9.10",
"@types/react-html-parser": "^2.0.1",
"@types/react-redux": "^7.1.7",
"@types/recharts": "1.8.14",
"@types/redux-mock-store": "^1.0.2",
"@types/showdown": "1.7.3",
"@types/smoothscroll-polyfill": "0.3.1",
"@types/uuid": "3.4.4",
"@types/webpack": "^4.41.21",
"@types/webpack-dev-server": "^3.1.4",
"@types/whatwg-fetch": "0.0.33",
"copy-webpack-plugin": "^5.1.1",
"cssnano": "^4.1.10",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "3.3.5",
"escape-string-regexp": "2.0.0",
"git-revision-webpack-plugin": "3.0.3",
"hasha": "5.0.0",
"html-webpack-plugin": "^3.2.0",
"isomorphic-fetch": "^3.0.0",
"jest": "^27.0.6",
"jest-date-mock": "^1.0.8",
"jest-junit-reporter": "^1.1.0",
"jest-localstorage-mock": "^2.4.3",
"js-beautify": "^1.13.0",
"jsdom": "16.7.0",
"jsdom-global": "3.0.2",
"mutationobserver-shim": "^0.3.7",
"ncp": "^2.0.0",
"npm-run-all": "4.1.5",
"postcss-preset-env": "^6.6.0",
"preload-webpack-plugin": "^3.0.0-beta.4",
"react-test-renderer": "17.0.2",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "^4.0.0-rc.3",
"reflect-metadata": "0.1.13",
"rimraf": "^2.6.3",
"semver-extra": "2.0.1",
"stylus": "^0.54.8",
"testcafe": "^1.14.2",
"testcafe-react-selectors": "^3.1.0",
"testcafe-reporter-jenkins": "^1.0.1",
"ts-jest": "^27.0.4",
"ts-loader": "^9.2.5",
"tslint": "^5.20.1",
"typescript": "4.2.3",
"url-pattern": "^1.0.3",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.10.1",
"write-file-atomic": "2.4.1"
}
The error comes during the test configuration:
jest.config.js
setupFiles: [
"jest-localstorage-mock",
"./src/test/setup.ts"],
I run the following setup script, which imports the libraries that cause the error:
setup.ts
import "core-js";
import "whatwg-fetch"; // Polyfill to use fetch (and Headers, Request) inside of node
import "mutationobserver-shim"; // Polyfill for the MutationObserver class
import memoize from "memoize-one";
I have no idea why and from where this error comes. In VS code I get the suggestion to npm install the types for mutationobserver-shim, but it seems that there aren't any.
