Develop Reference

Getting Error When Using Next.js With Jest

I am trying to run a test in next.js using jest, but i keep getting an error:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment.
I have tried following the link and addding the docblock:
/**
* #jest-environment jsdom
*/
to my code with no success.
I have also tried configuring my jest.config.js based on the next.js testing page. This does not work I have tried both the solution with and without the rust compiler. Neither works:
Package.JSON:
{
"name": "chat",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest --env=node --forceExit --watchAll --coverage"
},
"dependencies": {
"#firebase/testing": "^0.20.11",
"firebase": "^9.9.4",
"kill-port": "^2.0.1",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-firebase-hooks": "^5.0.3",
"react-hot-toast": "^2.3.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#firebase/rules-unit-testing": "^2.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#types/jest": "^29.0.2",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"firebase-admin": "^11.0.1",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3"
}
}
Jest.config.js:
// jest.config.js
const nextJest = require('next/jest');
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
});
// Add any custom config to be passed to Jest
/** #type {import('jest').Config} */
const customJestConfig = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
//moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
test/page.test.js
import { render, screen } from '#testing-library/react';
import Home from '../pages/index';
describe('Home', () => {
it('renders a heading', () => {
render(<Home />);
expect(2 + 2).toBe(4);
});
});

You're overriding the env in your npm test script, remove --env=node:
"test": "jest --forceExit --watchAll --coverage"

Module not found: Can't resolve 'fs

I'm trying to use useDapp and pinata SDK in my next js application.
My package.json file looks like this:
"name": "eternity",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#pinata/sdk": "^1.1.23",
"#usedapp/core": "^0.10.0",
"antd": "^4.18.5",
"next": "12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "8.8.0",
"eslint-config-next": "12.0.9"
}
}
The useDapp is working fine but when I try to use pinata api, I get errors. I ran a very basic test code like this:
import pinataSDK from "#pinata/sdk";
const pinataTest = () => {
const pinata = pinataSDK(
"5d349f3841ee16d7e668",
"a6f32583de5736824a606746f0b9b9bc365a5c81b3d1c9f1a98822a39ddfbb6d"
);
pinata
.testAuthentication()
.then((result) => {
console.log(result);
})
.catch((err) => {
console.log(err);
});
};
export default pinataTest;
It is just a test code given in the official docs of pinata SDK. But I run into this error.
https://nextjs.org/docs/messages/module-not-found
wait - compiling...
error - ./node_modules/#pinata/sdk/lib/pinata-sdk.js:24051:0
Module not found: Can't resolve 'fs'
Possible solutions to this error have been proposed here:
Module not found: Error: Can't resolve 'fs' in
The solutions that seems to be working for me is modifying my next.config.js file like this:
module.exports = {
reactStrictMode: true,
externals: {
FileReader: "FileReader",
},
webpack5: true,
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = { fs: false };
}
return config;
},
};
It seems to have solved the 'fs not found error, but then I run into this next error:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - ./node_modules/js-sha3/src/sha3.js:21:0
Module not found: Can't resolve 'process'
Import trace for requested module:
./node_modules/#ethersproject/keccak256/lib.esm/index.js
./node_modules/#ethersproject/abi/lib.esm/interface.js
./node_modules/#ethersproject/abi/lib.esm/index.js
./node_modules/#usedapp/core/dist/esm/src/constants/abi/index.js
./node_modules/#usedapp/core/dist/esm/src/constants/index.js
./node_modules/#usedapp/core/dist/esm/src/index.js
./pages/_app.js
It seems like the #useDapp module is not working without 'fs'.
Is there a way to solve this? Or am I missing something fundamental while using useDapp and pinata SDK in my next js app.

Jest - ReferenceError: __DEV__ is not defined (React Native)

I am trying to get jest to work with a new react-native project. However, when I run npm run test, I get the following error ReferenceError: __DEV__ is not defined. I've looked through countless Github issues and Stack Overflow posts regarding this but none of the suggestions have worked in my case.
Here is my jest.config.js file:
module.exports = {
transformIgnorePatterns: [
"node_modules/(?!(react-native|react-native-button|react-native-video)/)"
],
setupFiles: ['<rootDir>/__tests__/setup.json'],
}
package.json (notice I added DEV = true inside "jest")
{
"name": "DigitalSignagePlayer",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.15.5",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-native": "0.64.2",
"react-native-fs": "^2.18.0",
"react-native-splash-screen": "^3.2.0",
"react-native-video": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"#babel/runtime": "^7.14.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^27.0.2",
"eslint": "^7.28.0",
"jest": "^27.0.5",
"metro-react-native-babel-preset": "^0.66.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "react-native",
}
}
bable.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset', '#babel/preset-env'],
};
metro.config.js
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
I have tried setting globals.DEV = true and global.DEV = true at the top of my test files. I have tried adding setupFiles to jest.config.js which loads a setup.js file that contains global.DEV = true too. I have tried updating jest also. My current version of react-native is:
react-native-cli: 2.0.1
react-native: 0.64.2
I'm also using Metro, not Expo and I initially created the app with react-native-cli.
UPDATE:
setup.json
{
"globals": { "__DEV__": true }
}
UPDATE 2:
I changed setup.json to setup.js but I am still getting the same error:
global.__DEV__ = true

The variable is called __DEV__, so using DEV by trial and error doesn't make sense. Setting it in tests won't help because it won't affect the usage of the variable on import. In order to do this, this should have been done before tests in setupFiles* files.
Jes globals configuration option is supposed to do this. There should be "globals": { "__DEV__": true }. The configuration in package.json overridden by the configuration in jest.config.js. There should be only one of them (likely the latter), the other one needs to be removed.

Trying to compile TypeScript - Fails : if (!req.session?.jwt) { ... }

Consider the code :
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
export const currentUser = (
req: Request,
res: Response,
next: NextFunction
) => {
if (!req.session?.jwt) {
// make sure that session is defind and then access "jwt" property
return next();
}
try {
const payload = jwt.verify(
req.session.jwt,
process.env.JWT_KEY!
) as UserPayload;
req.currentUser = payload;
} catch (error) {}
next();
};
With the package.json :
{
"name": "#something/common",
"version": "1.0.2",
"description": "",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
"build/**/*"
],
"scripts": {
"clean": "del build /Q",
"build": "npm run clean && tsc",
"pub": "npm version patch && npm run build && npm publish"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"del-cli": "^3.0.0",
"typescript": "^3.8.3"
},
"dependencies": {
"#types/cookie-session": "^2.0.39",
"#types/express": "^4.17.5",
"#types/jsonwebtoken": "^8.3.9",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"express-validator": "^6.4.0",
"jsonwebtoken": "^8.5.1"
}
}
Whenever I try to compile with tsc , I get :
src/middlewares/current-user.ts:24:20 - error TS1109: Expression expected.
24 if (!req.session?.jwt) {
~
src/middlewares/current-user.ts:24:24 - error TS1005: ':' expected.
24 if (!req.session?.jwt) {
~
Found 2 errors.
What might cause this ?

Make sure the tsc version is recent enough, .? is a fairly recent addition. This error is what i would expect for a version not yet supporting it (it assumes that this is a ternary operator: condition ? a : b).
Maybe you used a globally installed version rather than the one of the package?

Webpack-dev-server Error: Cannot find module , can't understand why?

I have a new project and setup webpack to use as a module bundler but when I start the webpack-dev-server using npm start script , I got an error
Error can't find module :
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
although I wrote everything correct and I don't get the point of why this happened ? can any one tell me why this happen ?
this is my package.json file
{
"name": "simple-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webapck.common.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
and this is my webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') ;
module.exports = {
entry:{
index:'./src/index.js',
app:'./src/app.js'
},
output: {
path: path.join(__dirname,'dist'),
filename: "[name].js"
},
module: {
rules: [
{
test :/\.css$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin(
{
chunks:['app'],
template:'./index.html'
}
)
],
devServer: {
port:4000
}
}

I tried your project setup in my IDE and I think I found the solution of your problem , I think you wrote the wrong config name in package.json file
your file in the disk called webpack.common.js
the file name in package.json webapck.common.js
so to solve the problem
change the file name in package.json to webpack.common.js instead of webapck.common.js this will solve the problem I think , change the package.json start script to
"start": "webpack-dev-server --config ./webpack.common.js"