Can't make it work with Next Js 12

carvajalluis commented 2 years ago

Hello There! have been a promoter of this project for a while in my work because it helps me keep the demons at bay with the unit testing, thank you very much for it. Recently I found myself trying Next JS 12 and for some reason, I couldn't use jest-it-up with the createJestConfig export. The steps to reproduce:

follow the getting started tutorial
follow the setting up jest with the rust compiler tutorial
you end up with a jest.config.js like this:

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  // typical jest configuration export attributes
  // An object that configures minimum threshold enforcement for coverage results
  coverageThreshold: {
    global: {
      branches: 32.69,
      functions: 36.19,
      lines: 43.34,
      statements: 43.46,
    },
  },
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

but what i get on post test execution is

C:\git\omneural\frontend\node_modules\jest-it-up\lib\getData.js:6
    coverageThreshold: { global: thresholds },
                                 ^

TypeError: Cannot read properties of undefined (reading 'global')
    at getData (C:\git\omneural\frontend\node_modules\jest-it-up\lib\getData.js:6:34)
    at module.exports (C:\git\omneural\frontend\node_modules\jest-it-up\lib\index.js:20:37)
    at Object.<anonymous> (C:\git\omneural\frontend\node_modules\jest-it-up\bin\jest-it-up:15:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47

from what I read in your code you are expecting the coverage to be at a root level in the file directly, currently runing a package.json


{  
   ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint",
    "test": "jest --coverage=true --notify",
    "posttest": "jest-it-up",
    "test:watch": "yarn test --watch",
    "prepare": "cd ../ && husky install ./frontend/.husky",
    "coverage": "jest --coverage --ci --silent --coverageReporters=cobertura"
  },
  "lint-staged": {
    "**/*.{js,jsx}": [
      "yarn lint",
      "yarn coverage"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^12.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
  },
  "devDependencies": {
    "@testing-library/dom": "^8.13.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.5",
    "@testing-library/react-hooks": "^7.0.2",
    "@testing-library/user-event": "^13.2.1",
    "cz-conventional-changelog": "^3.1.0",
    "eslint": "^8.11.0",
    "eslint-config-next": "^12.1.0",
    "jest-canvas-mock": "^2.3.0",
    "jest": "^27.5.1",
    "jest-it-up": "^2.0.0",
    "lint-staged": "^11.0.0",
    "node-notifier": "^10.0.1",
    "stage": "^1.0.0"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

rbardini commented 2 years ago

Hi @carvajalluis! Happy to hear you're an advocate 🙂

From your error output, this is breaking:

https://github.com/rbardini/jest-it-up/blob/6cd9db55b761bee780e4a010fe6af69c86ffde82/lib/getData.js#L5-L8

Which means either configPath here is incorrect:

https://github.com/rbardini/jest-it-up/blob/6cd9db55b761bee780e4a010fe6af69c86ffde82/lib/index.js#L18

or the imported config module has a different structure than expected.

Are you running jest-it-up from the root of your project, where jest.config.js is located? There is currently no config file resolving algorithm, so if the command runs from a nested directory, it will likely fail.

carvajalluis commented 2 years ago

@rbardini thank you for your prompt response!

The file is at the root of the project here is the file listing:

$ ls -h
__tests__/   contexts/   jsconfig.json  node_modules/
  styles.css   components/  coverage/   jest.config.js  package.json 
 public/   jest.setup.js  next.config.js  pages/  readme.md   src/   yarn.lock

and when debugging jest-it-up it is found

but that immediately takes me away with the next jest setup to another place :

there is where I get lost because I thought all jest-it-up did was grab the config file and edit it, but now I see you load the config and update the file completely after new coverage is generated?

i think it is because new jest.config.js returns a callback to a function instead of a plain js object, global has many embeded globals with nothing like the content of the file .

rbardini commented 2 years ago

Indeed, the problem is that createJestConfig returns an async function instead of an object. I'll release a new version with a fix soon.

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 2.0.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

carvajalluis commented 2 years ago

@rbardini thank you very much for your prompt jump at this one ,

Happy coding!!

rbardini / jest-it-up

Can't make it work with Next Js 12 #10