setupTestFrameworkScriptFile is not supported error - reactjs

Hello I am trying to use Jest+Enzyme to test my react components. I am not using create react app so I find the error I am getting very strange. Does anybody know what I am doing wrong here?
Here is the error:
Out of the box, Create React App only supports overriding these Jest options:
• collectCoverageFrom
• coverageReporters
• coverageThreshold
• snapshotSerializers.
These options in your package.json Jest configuration are not currently supported by Create React App:
• setupTestFrameworkScriptFile
If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.
This is my test-setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
configure({ adapter: new Adapter() });
This is my package.json
{
"name": "duplo-plugin-starter-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"directories": {
"doc": "docs"
},
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test-setup.js"
},
"scripts": {
"test": "react-scripts-ts test --env=jsdom",
"build": "webpack",
"start": "webpack-dev-server --progress --inline"
},
"repository": {
"type": "git",
"url": "git#github.corp.dyndns.com:vcharlesthompson/duplo-plugin-starter-react.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/react": "^16.0.18",
"#types/react-dom": "^16.0.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"source-map-loader": "^0.2.3"
},
"devDependencies": {
"#types/enzyme": "^3.1.1",
"#types/jest": "^21.1.5",
"awesome-typescript-loader": "^3.2.3",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"react-addons-test-utils": "^15.6.2",
"react-scripts-ts": "^2.8.0",
"react-test-renderer": "^16.0.0",
"style-loader": "^0.19.0",
"typescript": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}

Related

Cypress Component testing for React Microbundle (Rollup) custom dev server configuration

I'm trying to setup a component testing strategy for a new react repo that we are working on here.
Based on Cypress documentation there are no useful details about how to configure component testing using a custom dev server like this.
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer(cypressConfig) {
// return dev server instance or a promise that resolves to
// a dev server instance here
},
},
})
My package.json looks like this one:
"source": "src/index.ts",
"exports": {
"require": "./dist/index.cjs",
"default": "./dist/index.modern.js"
},
"main": "./dist/index.cjs",
"module": "./dist/index.module.js",
"unpkg": "./dist/index.umd.js",
"typings": "dist/index",
"scripts": {
"build": "microbundle",
"dev": "microbundle watch",
"pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
"test": "jest",
"ci:start-example": "cd example; npm start",
"cy:open": "npx cypress open"
},
"dependencies": {
"react-style-object-to-css": "^1.1.2"
},
"peerDependencies": {
"react": "16 - 18",
"react-dom": "16 - 18"
},
"devDependencies": {
"#testing-library/cypress": "^8.0.3",
"#types/jest": "^28.1.6",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"cypress": "^10.3.1",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"jest": "^28.1.3",
"microbundle": "^0.15.0",
"prettier": "^2.7.1",
"ts-jest": "^28.0.7",
"typescript": "^4.7.4"
},
"files": [
"dist"
]
}
Is there someone facing the same issue with custom dev servers?
I'm not too familiar with microbundle and setting this up comparing with webpack or vite. Would appreciate any help please!

How do I create a react / react-dom webpack alias in next.js?

I have created an alias for react and react-dom in my next.config.js. This is my next.config.js:
var path = require("path");
module.exports = (phase) => {
return {
// typescript: {
// ignoreBuildErrors: false,
// },
webpack5: true,
webpack(config, options) {
// const { isServer } = options;
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
config.module.rules.push({
test: /\.svg$/,
loader: "#svgr/webpack",
});
config.resolve.alias["react"] = path.resolve(
__dirname,
"shared-js/node_modules/react"
);
config.resolve.alias["react-dom"] = path.resolve(
__dirname,
"shared-js/node_modules/react-dom"
);
console.log(path.resolve(__dirname, "shared-js/node_modules/react-dom"));
return config;
},
};
};
Why am I doing this?
I have a component library, which is based on material ui. This is imported to my nextjs app via a submodule (shared-js). This is the package.json for my component library:
{
"name": "my-component-library",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"main": "dist/index.js",
"module": "dist/index.modern.js",
"umd": "dist/index.min.js",
"source": "src/index.js",
"scripts": {
"start": "rollup -c -w",
"build": "NODE_ENV=production rollup -c",
"build-dev": "NODE_ENV=develop rollup -c --minifyInternalExports=false",
"prettier": "prettier --write ./src"
},
"peerDependencies": {
"eslint": "^8.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.4.2",
"#mui/material": "^5.4.1",
"#mui/styles": "^5.4.2",
"#mui/x-data-grid": "^5.7.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"prop-types": "^15.8.1",
"react-beautiful-dnd": "^13.1.0",
"react-grid-layout": "^1.3.4",
"react-resizable": "^3.0.4",
"recharts": "^2.1.9",
"rollup-plugin-import-css": "^3.0.3",
"styled-components": "^5.3.3",
"use-react-screenshot": "^3.0.0"
},
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.17.10",
"#babel/plugin-transform-runtime": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"#babel/preset-react": "^7.16.7",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^21.0.2",
"#svgr/rollup": "^6.2.1",
"babel-eslint": "^10.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^5.0.0",
"prettier": "^2.6.2",
"rollup": "^2.72.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-visualizer": "^5.6.0"
},
"files": [
"dist"
]
}
Here is my package.json for my nextjs app:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"repository": "",
"author": "",
"license": "MIT",
"dependencies": {
"next": "^12.1.5",
"react": "^18.1.0",
"react-dom": "^18.1.0"
}
}
And my folder structure for the project:
-.next
-node_modules
-pages
-shared-js
--node_modules
--package.json
package.json
next.config.js
The problem is, that I have two conflicting versions of react and react-dom (I guess) in my shared-js/node_modules and the other ones in the node_modules folder of my nextjs app. This caused the error "Invalid hook call" whenever I tried to import a component to my nextjs app. I looked into the documentation and saw that this might be because of two conflicting react / react-dom versions, which is indeed the case. So I tried to avoid this by defining this alias in my next.config.js.
Which led me here. Whenever I run npm run dev or npm run build for my nextjs app, I get this error, telling me that react-dom is apparently missing:
wait - compiling /_error (client and server)...
wait - compiling...
error - ./node_modules/next/dist/client/index.js:513:35
Module not found: Can't resolve 'react-dom/client'
Why is that? The path is correct, the dependency is there but still I get this error. Is there anything I am missing? Or something I am doing wrong?
What I already tried: Deleting node_mdoules and package-lock.json from both nextjs and my component library and reinstall them. Deleting .next and restart via npm run dev
that's how I solved the problem with the conflicting versions.
Good description of the problem: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link/
My next.config.js
var path = require("path");
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.resolve.alias["react"] = path.resolve("./node_modules/react");
return config;
},
};

What is producing "Invalid option for project: true" when running 'tslint --project' on a React project?

I'm trying to set up tslint to work on a small sample React/Typescript project, following a tutorial online. When I either run yarn lint or simply enter tslint --project in the terminal, I keep getting the error
Invalid option for project: true
I've done a lot of googling, and I can't find what I'm doing wrong.
My tslint.json is
{
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config-prettier"
],
"rules": {
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-console": false,
"jsx-no-lambda": false,
"member-ordering": false
}
}
and my package.jsonis
{
"name": "something",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel ./src/index.html",
"lint": "tslint --project",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.9.0",
"babel-preset-react": "^7.0.0-beta.3",
"parcel-bundler": "^1.12.3",
"prettier": "^1.18.2",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#babel/core": "^7.0.0",
"#emotion/babel-preset-css-prop": "^10.0.14",
"#emotion/core": "^10.0.16",
"#emotion/styled": "^10.0.15",
"axios": "^0.19.0",
"babel": "^6.23.0",
"bulma": "^0.7.5",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"typescript": "^3.5.3"
}
}
It may be I've messed up the package.json in converting this from the original eslint version, but I am lost at this point. Any help much appreciated.
The trick is that one needs to specify the directory where one is (ts)linting. Thus if you're in the root of your project,
tslint --project '.'
does the trick.

react-native-maps undefined is not an object (evaluating 'PropTypes.string')

We have a small hackaton in our office and I have some problem with react-native-maps. I am getting error: undefined is not an object (evaluating 'PropTypes.string') which is going to MapMaker.js file from MapView.
There is my package.json file:
{
"name": "niehandlowa",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"dependencies": {
"native-base": "^2.3.10",
"prop-types": "^15.6.1",
"react": "16.3.0-alpha.3",
"react-native": "^0.54.2",
"react-native-elements": "^0.19.0",
"react-native-maps": "^0.4.2",
"react-native-router-flux": "^4.0.0-beta.30",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.0-alpha.3"
},
"jest": {
"preset": "react-native"
}
}
I will be glad because today our team want to finish great app that we started yesterday :)
Have a nice day everybody!
It is most likely related to the version of react-native-maps you are using. v0.4.2 is using PropTypes from react and the library separated now. You should use a more resent version of the react-native-maps library

Deploy To Heroku Breaks App (Node, Yarn, Webpack 3, Angular 1.6)

I've been learning Webpack to transition from Bower. I've built a basic Angular(1.6.6) app on NodeJS(8.9.1) using Webpack(3.8.1) and Yarn(1.3.2); however, I get "Internal Server Error" when run on Heroku. Deploys fine, though, and works perfectly in localhost.
In my research, I've learned that Webpack needs to be in dependencies instead of devDependencies. Fixing this may have prevented other errors, but I have the same problem.
Heroku logs blame ejs, but I doubt that is the real problem:
Error: Could not find include include file.
at includeSource (/app/node_modules/ejs/lib/ejs.js:276:17)
at getIncludePath (/app/node_modules/ejs/lib/ejs.js:152:13)
at /app/node_modules/ejs/lib/ejs.js:629:26
at Array.forEach ()
at Template.generateSource (/app/node_modules/ejs/lib/ejs.js:605:15)
at Template.compile (/app/node_modules/ejs/lib/ejs.js:509:12)
at Object.compile (/app/node_modules/ejs/lib/ejs.js:358:16)
at handleCache (/app/node_modules/ejs/lib/ejs.js:201:18)
at tryHandleCache (/app/node_modules/ejs/lib/ejs.js:223:14)
at View.exports.renderFile [as engine]
(/app/node_modules/ejs/lib/ejs.js:437:10)
My package.json:
{ "name": "Simple Project",
"version": "0.1.0",
"description": "Simple Project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "node server.js",
"postinstall": "webpack -p",
"heroku-prebuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Simple/Project.git"
},
"keywords": [],
"author": "Name",
"license": "MIT",
"bugs": {
"url": "https://github.com/Simple/Project/issues"
},
"homepage": "https://github.com/Simple/Project#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"ng-annotate-loader": "^0.6.1",
"node-sass": "^4.6.1",
"normalize.css": "^7.0.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2"
},
"dependencies": {
"angular": "^1.6.6",
"angular-animate": "^1.6.6",
"angular-resource": "^1.6.6",
"angular-route": "^1.6.6",
"angular-ui-bootstrap": "^2.5.6",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.2.1",
"webpack": "^3.8.1"
},
"engines": {
"node": "^8.9.1",
"yarn": "^1.3.2"
}}
I've set Webpack to put all .js, vendor files, and styles into /dist which is .gitignore(d) in my git, but NOT in my push to Heroku. You can check out my git here:
https://github.com/SalamanderMike/portfolio
I've been researching this for a couple days and the answer hasn't revealed itself. I'm hoping someone can help me figure it out. I'm sure it's a simple thing I am overlooking. Thanks for your help!

Resources