DEV Community

Reynaldo Quispe Soca
Reynaldo Quispe Soca

Posted on

Configure jest in your project REact with vite

#nodev18 #jest
  1. install jest yarn add --dev jest
  2. install yarn add -D @types/jest and yarn add eslint @jest/globals --dev
  3. In file .eslintrc.cjs add jest: true,node:true module.exports = { root: true, env: { browser: true, es2020: true, jest: true, node: true },
  4. install yarn add --dev babel-jest @babel/core @babel/preset-env
  5. crate file babel.config.js and paste this code module.exports = { presets: [['@babel/preset-env', {targets: {node: 'current'}}]], };
  6. if you get an error of this type: 
 You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously. at loadCodeDefault (node_modules/@babel/core/src/config/files/module-types.ts:66:9) at loadCodeDefault.next (<anonymous>) at readConfigCode (node_modules/@babel/core/src/config/files/configuration.ts:75:37) at readConfigCode.next (<anonymous>) at Function.<anonymous> (node_modules/@babel/core/src/gensync-utils/async.ts:10:3) at evaluateSync (node_modules/gensync/index.js:251:28) at Function.sync (node_modules/gensync/index.js:89:14) at sync (node_modules/@babel/core/src/gensync-utils/async.ts:83:25) at sync (node_modules/gensync/index.js:182:19) at onFirstPause (node_modules/gensync/index.js:210:24) at cachedFunction (node_modules/@babel/core/src/config/caching.ts:131:34) at cachedFunction.next (<anonymous>) at evaluateSync (node_modules/gensync/index.js:251:28) at node_modules/gensync/index.js:31:34 at Array.map (<anonymous>) at Function.sync (node_modules/gensync/index.js:31:22) at Function.all (node_modules/gensync/index.js:210:24) at all (node_modules/@babel/core/src/config/files/configuration.ts:264:34) at loadOneConfig.next (<anonymous>) at buildRootChain (node_modules/@babel/core/src/config/config-chain.ts:171:39) at buildRootChain.next (<anonymous>) at loadPrivatePartialConfig (node_modules/@babel/core/src/config/partial.ts:110:44) at loadPrivatePartialConfig.next (<anonymous>) at Function.loadPrivatePartialConfig (node_modules/@babel/core/src/config/partial.ts:173:12) at evaluateSync (node_modules/gensync/index.js:251:28) at Function.sync (node_modules/gensync/index.js:89:14) at sync (node_modules/@babel/core/src/config/index.ts:58:21) at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:228:41) at ScriptTransformer._getFileCachePath (node_modules/@jest/transform/build/ScriptTransformer.js:289:27) at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:522:32) at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:671:40) at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:723:19)
Enter fullscreen mode Exit fullscreen mode

change name de you file babel.config.js to babel.config.cjs

--------------------------- ANOTHER THINGS -------------
A. yarn add -D whatwg-fetch
---INSTALL TESTIN LYBRARY----
A. npm install --save-dev @testing-library/react
B. yarn add -D jest-environment-jsdom
C. yarn add -D @babel/preset-react
E. in babel.config write presets: [
["@babel/preset-env", { targets: { esmodules: true } }],
["@babel/preset-react", { runtime: "automatic" }],
],
F create file jest.config.cjs and paste module.exports = {
// Other Jest configuration options...
testEnvironment: "jsdom",
};

Top comments (0)