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!
Related
So I'm using Vite with React, and working fine until this morning. When I run npm run dev local server starts normally, and there is no error/warning in the console. However in the browser console, I see this warning,
Something has shimmed the React DevTools global hook (__REACT_DEVTOOLS_GLOBAL_HOOK__). Fast Refresh is not compatible with this shim and will be disabled.
and hot reload is not working. Whenever I change something I have to manually refresh the browser window to see the changes. Any help?
my package.json file:
{
"name": "test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#capacitor/android": "^4.6.3",
"#capacitor/browser": "^4.1.1",
"#capacitor/core": "^4.6.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1"
},
"devDependencies": {
"#capacitor/cli": "^4.6.3",
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"#vitejs/plugin-react": "^3.1.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.6",
"vite": "^4.1.0"
}
}
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;
},
};
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'
class Store {
_number = 0
increment = () => {
this._number++
}
get number() {
return String(this._number)
}
}
// All of those are defined
console.log('TEST', {action, decorate, computed, observable, observer})
decorate(Store, {
_number: observable,
increment: action,
number: computed,
})
class TestComponent extends React.Component {
static defaultProps = {
clickableComponent: 'button',
numberElement: 'div',
}
store = new Store()
render() {
const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
const {number, increment} = this.store
return <Fragment>
<ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
<NumberElement>{number}</NumberElement>
</Fragment>
}
}
export default observer(TestComponent)
In browser (react) app I get the following error:
Failed to compile
PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
In native app (react-native) I get the following runtime error:
error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root package.json:
{
"name": "monorepo-rn",
"private": true,
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"workspaces": {
"packages": [
"packages/**"
],
"nohoist": [
"**/react-native",
"**/react-native/**"
]
},
"scripts": {
"run:web": "yarn workspace web start",
"run:native:ios": "yarn workspace nativeapp react-native run-ios",
"run:native:android": "yarn workspace nativeapp react-native run-android"
}
}
Here is the package.json of the shared package:
{
"name": "test-component",
"version": "1.0.0",
"main": "src/index.js",
"license": "MIT",
"scripts": {
"build": "babel src --out-dir lib"
},
"peerDependencies": {
"mobx": "^4.x",
"mobx-react": "^5.x",
"react": "^16.x",
"react-dom": "^16.x"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"dependencies": {}
}
Here is the package.json of the webapp:
{
"name": "web",
"version": "0.1.0",
"dependencies": {
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3",
"test-component": "1.0.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewire-babel-loader": "^0.1.1",
"react-app-rewired": "^2.0.3"
}
}
And here is the package.json of the react-native app:
{
"name": "nativeapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"test-component": "1.0.0",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
"react": "16.6.3",
"react-native": "0.58.3"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.
I'm new to React Native. I used the React Native Firebase starter kit and followed all the steps, but as soon as I want to start, it gets stuck at this screen:
Has anyone experienced this or know how to fix this?
UPDATE: When I run npm run iOS I get the following error:
Content of Package.json
{
"name": "ReactNativeStarter",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-install": "2.1.0",
"babel-jest": "^23.4.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"fs-extra": "^6.0.1",
"jest": "^23.4.0",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"fbjs": "^0.8.17",
"react": "^16.3.2",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.6"
}
}
Content of .babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Looks like Babel needs to be upgraded.
When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.
However, you are using babel-preset-react-native-stage-0 which does not seem to support React Native 0.56.0. See https://github.com/skevy/babel-preset-react-native-stage-0/issues/8
My advice would be to try using babel-preset-react-native until a fix for babel-preset-react-native-stage-0 is released.
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"
}
}