FormidableLabs / jest-next-dynamic

Resolve Next.js dynamic import components in Jest tests
MIT License
69 stars 7 forks source link

Jest is not defined #22

Open Ali-Hussein-dev opened 3 years ago

Ali-Hussein-dev commented 3 years ago

Error msg:

ReferenceError: jest is not defined
    at Object.<anonymous> (C:\Users\alilo\Documents\NextjsWithTS\nextjs-boilerplate\node_modules\jest-next-dynamic\index.js:53:3)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.H76Q (C:\Users\alilo\Documents\NextjsWithTS\nextjs-boilerplate\.next\server\pages\__tests__\index.test.js:121:18)
    at __webpack_require__ (C:\Users\alilo\Documents\NextjsWithTS\nextjs-boilerplate\.next\server\pages\__tests__\index.test.js:23:31)    
    at Module.hF5B (C:\Users\alilo\Documents\NextjsWithTS\nextjs-boilerplate\.next\server\pages\__tests__\index.test.js:190:75) {
  type: 'ReferenceError'
}

index.test.js

import HomePage from '@/pages/index';
import preloadAll from 'jest-next-dynamic';
import { render } from 'src/testUtils/testUtils';

beforeAll(async () => {
  await preloadAll();
});
describe('Home page', () => {
  it('Should... WHEN...', () => {
    render(<HomePage />);
  });
});

jest config

module.exports = {
  roots: ['<rootDir>/src'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
  },
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
    'src/(.*)': '<rootDir>/src/$1',
    '@/pages/(.*)': '<rootDir>/src/pages/$1',
    '@/components/(.*)': '<rootDir>/src/components/$1',
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-dynamic-import-node"]
}
"devDependencies": {
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.35",
    "@types/react": "^17.0.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "babel-jest": "^26.6.3",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-react": "^7.22.0",
    "jest": "^26.6.3",
    "jest-next-dynamic": "^1.0.1",
    "jest-watch-typeahead": "^0.6.1",
    "typescript": "^4.2.3"
  }

What could be the reason for it? how might my code affect an external module?

skizzo commented 2 years ago

Hey, did you solve this? I ran into the same error, although everything was working just fine 2 weeks ago..

denisugo commented 2 years ago

I have encountered the same error. You should avoid placing your __test__ folder with jest tests within your pages folder. Simply move it somewhere out of the pages, this will resolve your issue.

CarlosRangel17 commented 1 year ago

@denisugo simple yet effective answer! Fixed exactly my problem. Thank you!