I am trying to run JEST for the react code,it always shows PASS and not running any script written inside test folder.Inside coverage folder also i am not getting any components folder being created.kindly let me know how to fix it
following are my configurations
package.json
{
"devDependencies": {
"axios": "^0.11.1",
"babel": "^6.5.2",
"babel-core": "^6.7.4",
"babel-eslint": "^4.1.6",
"babel-jest": "^9.0.3",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"css-loader": "^0.23.1",
"es6-promise": "^3.2.1",
"es6bindall": "0.0.5",
"eslint": "^1.10.3",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^5.0.0",
"express": "^4.13.4",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-jest": "^0.2.0",
"grunt-webpack": "^1.0.11",
"imports-loader": "^0.6.5",
"jasmine-ajax": "^3.2.0",
"jest-cli": "^0.9.2",
"node-sass": "^3.4.2",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-fileupload": "^2.2.0",
"react-hot-loader": "^1.2.9",
"react-router": "^2.6.1",
"sass-loader": "^3.2.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"prestart": "webpack",
"build": "webpack",
"test": "jest",
"lint": "node_modules/.bin/eslint -f html app-client.js components > report.html || exit 0",
"start": "node app-server.js"
},
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
"collectCoverage": true,
"preprocessorIgnorePatterns": [
"../frontend/node_modules/"
],
"testFileExtensions": [
"js",
"es6"
],
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"unmockedModulePathPatterns": [
"react",
"fbjs",
"react-dom",
"react-addons-test-utils",
"es6bindall",
"axios",
"promise",
"react-router",
"sinon"
],
"verbose": true
}
}
The folder for your tests should be __tests__ not tests. If you want to change that you need to use testRegex option.
If you want run it with coverage you can do:
jest --coverage
or in your script case:
npm test -- --coverage
Be aware that I am talking about latest version of Jest (14.x). You can find an example I wrote about setting up Jest and running tests with or without coverage.
Related
When running all test suites within my project, only 1 test suite fails with the following TS validation error.
● Test suite failed to run
node_modules/#myorg/apple/src/components/apple-application/AppleApplication.tsx:637:8 - error TS2322: Type 'unknown' is not assignable to type 'ReactNode'.
637 {node}
~~~~~~
node_modules/#types/react/index.d.ts:1343:9
1343 children?: ReactNode | undefined;
~~~~~~~~
The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'
The jest.config.js is
module.exports = {
testEnvironment: 'jsdom',
testTimeout: 25000,
maxConcurrency: 20,
collectCoverageFrom: [
'src/**/*.js',
'src/**/*.ts',
'src/**/*.tsx',
'!**/index.*',
'!**/components.*',
'!**/node_modules/**',
'!**/*.stories.*',
'!**/*.md',
'!src/helpers/file.js',
'!src/helpers/jest-setup.js',
],
reporters: ['jest-progress-bar-reporter'],
coverageReporters: ['lcov', 'text-summary'],
testMatch: ['**/?(*.)spec.[tj]s?(x)'],
testEnvironmentOptions: { url: 'http://localhost' },
setupFilesAfterEnv: ['raf/polyfill', '<rootDir>/src/helpers/jest-setup.ts'],
transformIgnorePatterns: ['/node_modules/((?!(#myorg))/)'],
transform: {
'src/.+\\.(j|t)sx?$': 'ts-jest',
'node_modules/(#myorg)/.+\\.(j|t)sx?$': 'ts-jest',
},
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
'<rootDir>/src/mocks/file.js',
'^.+\\.(css|less|scss|md)$': 'identity-obj-proxy',
},
coverageThreshold: {
global: {
lines: 90,
statements: 90,
},
},
};
Also disabling diagnostic for this specific module does not resolve the issue.
transform: {
'node_modules/(#myorg)/apple/.+\\.(j|t)sx?$': [
'ts-jest',
{
diagnostics: false,
},
],
'src/.+\\.(j|t)sx?$': 'ts-jest',
'node_modules/(#myorg)/.+\\.(j|t)sx?$': 'ts-jest',
},
package.json
{
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"resolutions": {
"babel-eslint-parser/semver": "^7.3.2"
"version": "1.0.0",
"private": true,
"license": "ISC",
"repository": {
"type": "git",
"url": "https://gitlab......"
},
"scripts": {
"build": "webpack --mode=production",
"build:analyse": "webpack --mode=production --env=analyse=true",
"build:ota": "webpack --mode=development",
"build:ota:analyse": "webpack --mode=development --env=analyse=true",
"build:storybook": "build-storybook -c .storybook -o storybook-static",
"commitizen": "git-cz",
"lint:js": "eslint --fix --ext .ts,.tsx src",
"lint:less": "stylelint --syntax less",
"prepare": "husky install",
"prettier": "prettier --write --check 'src/**/*.{ts,tsx,css,json,md}'",
"sonar": "sonar-scanner -Dproject.settings=sonar-project.properties",
"start": "start-storybook -p 9001 -c .storybook",
"test": "NODE_ENV=test && jest --silent --maxWorkers=50%",
"test:coverage": "jest --coverage --ci --silent --maxWorkers=50%",
"test:debug": "NODE_ENV=test && jest -t 'debug*' --maxWorkers=50%",
"test:regression": "yarn run test -c jest.config.regression.js --maxWorkers=50%",
"test:watch": "yarn run test --watch --maxWorkers=25%"
},
"dependencies": {
"#myorg/account-helpers": "^2.6.0",
"#myorg/api": "^5.0.7",
"#myorg/application": "^12.0.0",
"#myorg/browser": "^4.2.0",
"#myorg/card": "^19.3.3",
"#myorg/core-less-imports": "^2.2.18",
"#myorg/description-list": "^11.0.0",
"#myorg/design-tokens": "^10.2.0",
"#myorg/form": "^21.1.2",
"#myorg/form-block": "^9.4.0",
"#myorg/form-block-address": "^15.2.1",
"#myorg/form-block-password-create": "^14.1.0",
"#myorg/form-field-birthday": "^12.1.1",
"#myorg/form-field-checkbox": "^9.1.0",
"#myorg/form-field-datepicker": "^16.7.5",
"#myorg/form-field-iban": "^10.1.1",
"#myorg/form-field-input": "^10.1.0",
"#myorg/form-field-input-radio-button-group": "^14.0.1",
"#myorg/form-field-nationality": "^10.0.0",
"#myorg/form-field-select": "^10.1.0",
"#myorg/form-field-telephone": "^10.1.0",
"#myorg/form-field-username": "^10.1.0",
"#myorg/form-footer": "^9.2.0",
"#myorg/grid": "^2.1.3",
"#myorg/inpage-navigation": "^7.1.0",
"#myorg/apple": "^4.1.2",
"#myorg/modal": "^20.0.0",
"#myorg/monitoring": "^2.1.0",
"#myorg/my-page": "^5.5.0",
"#myorg/notification": "^15.1.1",
"#myorg/panel": "^30.1.0",
"#myorg/providers-application": "^2.1.0",
"#myorg/theme": "^10.18.1",
"#myorg/toggle-content-visibility": "^6.3.1",
"#myorg/tooltip": "^14.0.0",
"#myorg/typography": "^11.2.0",
"#myorg/username-availability": "^1.0.3",
"#myorg/visibility-sensor": "^7.0.1",
"styled-components": "^5.3.6",
"#myorg/form-field-email": "^10.2.1",
"#myorg/data-layer": "^8.0.3",
"#myorg/form-field-password": "^14.3.1",
"#myorg/button": "^18.6.1",
"#myorg/link": "^17.0.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#myorg/test-utils": "^2.0.0",
"#babel/cli": "^7.19.3",
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/register": "^7.18.9",
"#cerner/duplicate-package-checker-webpack-plugin": "^2.3.0",
"#storybook/addon-a11y": "^6.4.19",
"#storybook/addon-essentials": "^6.5.9",
"#storybook/addon-knobs": "^6.4.0",
"#storybook/addon-queryparams": "^6.2.9",
"#storybook/addon-storyshots": "^6.5.9",
"#storybook/addon-storyshots-puppeteer": "^6.5.9",
"#storybook/addon-storysource": "^6.5.9",
"#storybook/react": "^6.5.13",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.2.1",
"#types/classnames": "2.3.1",
"#types/jest": "^29.2.3",
"#types/jsdom": "16.2.14",
"#types/node": "14.14.28",
"#types/styled-components": "^5.1.23",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"autoprefixer": "9.8.6",
"babel-eslint-parser": "^7.13.10",
"babel-jest": "^29.3.1",
"babel-loader": "^8.3.0",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-require-context-hook": "^1.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"clean-webpack-plugin": "^4.0.0",
"commitizen": "4.2.4",
"cross-env": "7.0.3",
"css-loader": "5.2.7",
"css-minimizer-webpack-plugin": "1.0.0",
"cz-conventional-changelog": "3.3.0",
"enzyme": "3.11.0",
"eslint": "^8.12.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"eslint-plugin-unused-imports": "^2.0.0",
"fetch-mock": "9.11.0",
"fetch-mock-jest": "1.5.1",
"file-loader": "6.2.0",
"husky": "^7.0.0",
"identity-obj-proxy": "3.0.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"jest-fetch-mock": "^3.0.3",
"jest-junit": "^15.0.0",
"jest-progress-bar-reporter": "^1.0.25",
"less": "3.12.2",
"less-loader": "7.2.1",
"lint-staged": "12.4.1",
"mini-css-extract-plugin": "^1.6.2",
"mockdate": "3.0.5",
"postcss-loader": "4.1.0",
"preact": "10.8.2",
"preact-render-to-json": "3.6.6",
"prettier": "2.6.2",
"puppeteer": "^13.1.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"sonarqube-scanner": "2.8.1",
"standard-version": "9.3.2",
"style-loader": "2.0.0",
"ts-jest": "^29.0.3",
"typescript": "4.6.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "4.1.1",
"webpack": "4.44.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "4.9.2"
}
}
Oddly enough this module is use in the component where the test is failing on.
In the end the TS validation was definitely not the issue. After replacing ts-jest by babel-jest in the the jest.config.ts the actual error was shown. An missing Context Provider in the test setup.
I am modifying a forum software at here
After installing "npm install -S react-draft-wysiwyg" on that forum project, I tried to apply global css by putting "import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';" at the top of some React component js file in that forum software.
But it looks like something is blocking global CSS. CSS in that import didn't affect React js file. But I do not know what is blocking global css. My only guess is could be somewhat related to webpack but not sure.
I tried making a new react project by "npx create-react-app" and applied that global css, and it worked there. So I concluded that something is blocking global css in that forum project so that global CSS implementation doesn't work in that forum software only.
Here is package.json that forum software uses:
{
"name": "reforum",
"version": "1.0.0",
"description": "A forum application built with ReactJS, Redux, Express and MongoDB",
"license": "MIT",
"keywords": [
"forum",
"react",
"redux",
"express",
"mongodb"
],
"main": "server.js",
"engines": {
"node": "7.1.0"
},
"scripts": {
"test": "jest",
"start": "better-npm-run start",
"start:dev": "better-npm-run start:dev",
"build": "webpack --config config/webpack.prod.config.js"
},
"betterScripts": {
"start": {
"command": "node server.js",
"env": {
"NODE_ENV": "production",
"PORT": 3030
}
},
"start:dev": {
"command": "node server.js",
"env": {
"NODE_ENV": "development",
"PORT": 8080
}
}
},
"dependencies": {
"better-npm-run": "^0.0.13",
"body-parser": "^1.15.2",
"compression": "^1.6.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"express": "^4.14.0",
"express-session": "^1.14.2",
"help": "^3.0.2",
"lodash": "^4.17.4",
"mongoose": "^4.7.4",
"morgan": "^1.7.0",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
"passport-local": "^1.0.0"
},
"devDependencies": {
"async": "^2.1.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel": "^6.5.2",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"draft-js": "^0.10.0",
"eslint": "^3.12.1",
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jest": "^20.0.4",
"moment": "^2.17.1",
"nock": "^9.0.13",
"postcss-loader": "^1.2.2",
"postcss-nesting": "^2.3.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-helmet": "^5.0.3",
"react-hot-loader": "^1.3.1",
"react-onclickoutside": "^5.10.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.3",
"redux-thunk": "^2.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.2"
}
}
Can you please tell me what is blocking global CSS implementation?
Thank you very much.
You are using css-loader in webpack. So normal css will be compiled to another name such as
localIdentName: "[local]___[hash:base64:5]"
You can write your css with global such as
:global(.myclass) {
background-color: red;
}
or you can disable module in your webpack config
{
loader: "css-loader",
options: {
modules: false,
}
},
I'm trying to run tests on React components within Mocha, but I keep stumbling up on this error:
var os = (navigator.platform.match(/mac|win|linux/i) || ["other])[0].toLowerCase();
TypeError: Cannot read property 'match' of undefined
I understand that the error means that the module is having trouble figuring out what platform the code is running on. However this error is being thrown from node_modules/brace/index.js, so it is not something that I have written myself. Is there a way for Mocha to ignore this and continue with the tests?
Here is my package.json:
{
"name": "project",
"version": "0.2.0",
"description": "project",
"scripts": {
"clean:build": "node ./bin/clean.js createdir",
"build:html": "node ./bin/buildHtml.js",
"deployProduction": "node ./bin/deployProduction.js",
"start": "webpack-dev-server --config ./config/webpack.config.dev.js --hot --in line --progress",
"serve": "npm run deployProduction&& supervisor --watch ./production-copy src/js/server",
"prebuild": "npm run clean:build",
"postbuild": "node ./bin/postBuild.js",
"rebuild-win": "set BUILD_TYPE=preview& npm run prebuild & npm run build-win & npm run serve",
"build": "set BUILD_TYPE=final& npm run prebuild & npm run build-win",
"deploy": "npm run build & npm run serve",
"build-win": "set NODE_ENV=production & npm run element-build & npm run build-doc & npm run build:html & webpack -p --config ./config/webpack.config.prod.js --json > webpack.log.json & npm run postbuild",
"lint": "eslint config src/js/**/*.js",
"jscs": "jscs src/js/",
"test": "mocha --compilers js:babel-core/register --require ./test/unit/dom.js --recursive ./test/*.spec.js ",
"test:watch": "npm run test -- --watch",
"element-init": "node node_modules/element-theme/bin/element-theme -i src/js/core/ui/element-theme.css",
"element-build": "node node_modules/element-theme/bin/element-theme -c src/js/core/ui/element-theme.css -o src/js/core/ui/element-theme ",
"build-doc": "node bin/buildDoc.js "
},
"repository": {
"type": "git",
"url": "<our repository>"
},
"license": "MIT",
"bugs": {
"url": "<our url>"
},
"homepage": "<our homepage>",
"dependencies": {
"autoprefixer": "^6.3.6",
"axios": "^0.11.1",
"babel-standalone": "^6.10.3",
"bluebird": "^3.4.0",
"brace": "^0.8.0",
"browserify": "^13.0.1",
"classnames": "2.2.3",
"cls-bluebird": "^1.0.1",
"codemirror": "^5.16.0",
"continuation-local-storage": "^3.1.7",
"dateformat": "^1.0.12",
"diff": "^3.0.1",
"element-theme": "^0.4.0",
"element-ui": "^1.1.5",
"express-history-api-fallback": "^2.0.0",
"filedrop": "^2.0.0",
"fs-extra": "^0.30.0",
"history": "^2.0.2",
"humps": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"jszip": "^3.0.0",
"jszip-utils": "0.0.2",
"lodash": "^4.11.1",
"material-ui": "^0.16.2",
"materialize-css": "^0.97.6",
"normalizr": "^1.0.0",
"raven-js": "^3.9.1",
"react": "^15.4.2",
"react-ace": "^4.1.4",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.4.0",
"redux-logger": "^2.6.1",
"redux-saga": "^0.9.5",
"request": "^2.72.0",
"request-promise": "^3.0.0",
"save-as": "^0.1.7",
"showdown": "^1.4.2",
"three": "^0.79.0",
"vue": "^2.0.5",
"vue-loader": "^9.8.1",
"vue-router": "^2.0.1",
"vue-slider-component": "^2.0.4",
"walk": "^2.3.9"
},
"devDependencies": {
"babel-core": "^6.7.6",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.0.2",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.6.1",
"babel-preset-airbnb": "^2.2.3",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.7.2",
"chai": "^3.5.0",
"chai-jquery": "2.0.0",
"cheerio": "^0.22.0",
"colors": "1.1.2",
"concurrently": "^2.0.0",
"copy-webpack-plugin": "2.1.1",
"css-loader": "0.23.1",
"element-theme-default": "^1.1.5",
"enzyme": "^2.7.1",
"eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-react": "^5.2.2",
"express": "^4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jquery": "2.2.3",
"jscs": "3.0.3",
"jsdoc-to-markdown": "^2.0.0",
"jsdom": "^9.11.0",
"mocha": "^3.2.0",
"ncp": "^2.0.0",
"node-sass": "3.7.0",
"postcss-loader": "0.8.2",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"react-transform-hmr": "^1.0.4",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"remotedev": "^0.1.2",
"rimraf": "^2.5.2",
"sass-loader": "3.2.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "1.14.1",
"webpack-hot-middleware": "^2.10.0"
}
To solve this, as the OP mentioned you need to set up the navigator in your test setup and include two properties: platform and appName.
Here is a little snip-it of what your test setup script should contain to set this up properly:
var exposedProperties = ['window', 'navigator', 'document'];
global.window = document.defaultView;
global.navigator = {
userAgent: 'node.js',
platform: 'windows', // This can be set to mac, windows, or linux
appName: "Microsoft Internet Explorer", // Be sure to define this as well
};
Found the issue: I was recreating the navigator variable and forgetting to put the platform member inside of it.
I have a create-react-app on heroku. When I try to deploy a change to production it is failing and giving me the following error:
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/ReactDOM in /tmp/build_a87ef5601c25702212bff26dba1f999c/node_modules/react-dom
However, it is successful when I do npm run build. Here is my package.json file:
{
"name": "test_app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.0.0",
"babel-jest": "16.0.0",
"babel-loader": "6.2.5",
"babel-preset-react-app": "^1.0.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.25.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.3.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"find-cache-dir": "0.1.1",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "16.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react": "^15.4.1",
"react-addons-test-utils": "^15.4.1",
"react-dev-utils": "^0.3.0",
"react-dom": "^15.4.1",
"recursive-readdir": "2.1.0",
"rimraf": "2.5.4",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"axios": "^0.15.2",
"react": "^15.4.1",
"react-bootstrap": "^0.30.6",
"react-dom": "^15.4.1",
"react-redux": "4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0",
"socket.io": "^1.5.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
"^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
},
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>/(build|docs|node_modules)/"
],
"testEnvironment": "node"
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I tried removing the node_modules file and re-installing per the advice here but I continue to get the same error. I have buildpack set up with heroku and was able to successfully deploy the app last week. Any help or advice would be greatly appreciated.
We are facing a problem with Relay/GraphQL/React in production. When testing in master everything works fine, however in production we get the following error in the console which causes everything related to Relay/GraphQL/React not to be working at all:
Uncaught Error: Relay transform error ``Map is not defined`` in file '/var/app/ondeck/app/react/relay/routes/xxx-route.jsx'. Try updating your GraphQL schema if an argument/field/type was recently added.
We believe is something related to the build of the application when it's getting deployed, however we have no idea where to start looking at.
This is my package.json in case it helps:
{
"private": true,
"devDependencies": {
"babel-eslint": "^6.0.4",
"eslint": "^2.11.1",
"eslint-plugin-react": "^5.1.1",
"webpack-notifier": "^1.3.1"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.4.0",
"babel-loader": "^6.2.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-relay-plugin": "^0.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"graphiql": "^0.7.2",
"graphql": "^0.6.0",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.3.3",
"postal": "^2.0.4",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-linkify": "^0.1.1",
"react-notification-system": "^0.2.6",
"react-relay": "^0.9.0",
"react-star-rating-component": "^1.0.0",
"react-stars": "^2.1.0",
"react-webpack-rails": "^0.4.1",
"sass-loader": "^4.0.0",
"webpack": "^1.12.1"
},
"scripts": {
"build": "webpack -p --config webpack/production.config.js",
"start": "webpack -w --config webpack/dev.config.js",
"lint": "eslint --ext .js,.jsx app/react/**"
},
"license": "",
"engines": {
"node": ">= 0.10"
}
}
Just for the record, I needed to update Node.js to the latest version in order for everything to work again. Thanks.