Jest reference error 'describe' is not defined when running Next.js build

Viewed 2848

I am struggling to get a next build completing without the following error being thrown:

> Build error occurred
{ ReferenceError: describe is not defined

The dev server and tests run fine but it does not seem to pick up the jest global describe in my *.spec.tsx files.

I am using node version 10.16.1 with the following package.json:

{
    "name": "trufflus",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "deploy": "npm run build && next export",
        "test": "jest",
        "test:watch": "yarn test -- --watch",
        "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,ts,tsx}": [
            "eslint --fix"
        ]
    },
    "dependencies": {
        "next": "9.4.2",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "tailwindcss": "^1.4.6",
        "typeface-lobster": "^0.0.72",
        "typeface-roboto": "^0.0.75"
    },
    "devDependencies": {
        "autoprefixer": "^9.8.0",
        "postcss-import": "^12.0.1",
        "postcss-preset-env": "^6.7.0",
        "@testing-library/jest-dom": "^5.8.0",
        "@testing-library/react": "^10.0.4",
        "@types/jest": "^25.2.3",
        "@types/node": "^14.0.5",
        "@types/react": "^16.9.35",
        "@typescript-eslint/eslint-plugin": "^3.0.0",
        "@typescript-eslint/parser": "^3.0.0",
        "eslint": "^7.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-jest": "^23.13.1",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.20.0",
        "husky": "^4.2.5",
        "jest": "25.5.4",
        "lint-staged": "^10.2.6",
        "prettier": "^2.0.5",
        "prop-types": "^15.7.2",
        "ts-jest": "25.5.1",
        "typescript": "^3.9.3"
    }
}

I have two seperate TypeScript configuration files; one for development/prod builds:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve"
    },
    "exclude": ["node_modules"],
    "include": ["next-env.d.ts", "node_modules/@types", "**/*.ts", "**/*.tsx"]

And one for testing:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "jsx": "react",
        "types": ["jest", "node"]
    },
    "exclude": ["**/*.spec.tsx"]
}

I have separate components and pages folders which both contain *.spec.tsx files.

I have tried upgrading my version of Node and according to this issue:

ReferenceError: describe is not defined in Jest + Typescript

My configuration above should work but I do not know where this is now failing.

I have tried upgrading jest, ts-jest and node to no avail!

2 Answers

The dev server and tests run fine but it does not seem to pick up the jest global describe in my *.spec.tsx files

This is probably because you tsconfig for test has this line "exclude": ["**/*.spec.tsx"] while your dev/prod tsconfig don't.

You need to exclude your test file from being compiled during build.

I solved it by moving the tests folder from src/pages to src/ and it worked perfectly.

Related