Configure jest in your project REact with vite
Tags: nodev18, jest
Published: 2023-07-23 22:32:16

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)
```
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",
  };`