title: Getting Error When Using Next.js With Jest
body: <p>I am trying to run a test in next.js using jest, but i keep getting an error:
  <code>The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the &quot;jsdom&quot; test environment.</code></p>
  <p>I have tried following the link and addding the docblock:</p>
  <pre><code>/**
   * @jest-environment jsdom
   */
  </code></pre>
  <p>to my code with no success.</p>
  <p>I have also tried configuring my jest.config.js based on the next.js testing page. This does not work I have tried both the solution with and without the rust compiler. Neither works:</p>
  <p>Package.JSON:</p>
  <pre><code>{
    &quot;name&quot;: &quot;chat&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start&quot;,
      &quot;lint&quot;: &quot;next lint&quot;,
      &quot;test&quot;: &quot;jest --env=node --forceExit --watchAll --coverage&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@firebase/testing&quot;: &quot;^0.20.11&quot;,
      &quot;firebase&quot;: &quot;^9.9.4&quot;,
      &quot;kill-port&quot;: &quot;^2.0.1&quot;,
      &quot;next&quot;: &quot;12.2.5&quot;,
      &quot;react&quot;: &quot;18.2.0&quot;,
      &quot;react-dom&quot;: &quot;18.2.0&quot;,
      &quot;react-firebase-hooks&quot;: &quot;^5.0.3&quot;,
      &quot;react-hot-toast&quot;: &quot;^2.3.0&quot;,
      &quot;uuid&quot;: &quot;^8.3.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/plugin-syntax-jsx&quot;: &quot;^7.18.6&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.18.6&quot;,
      &quot;@firebase/rules-unit-testing&quot;: &quot;^2.0.4&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,
      &quot;@testing-library/react&quot;: &quot;^13.4.0&quot;,
      &quot;@types/jest&quot;: &quot;^29.0.2&quot;,
      &quot;eslint&quot;: &quot;8.23.0&quot;,
      &quot;eslint-config-next&quot;: &quot;12.2.5&quot;,
      &quot;firebase-admin&quot;: &quot;^11.0.1&quot;,
      &quot;jest&quot;: &quot;^29.0.3&quot;,
      &quot;jest-environment-jsdom&quot;: &quot;^29.0.3&quot;
    }
  }
  </code></pre>
  <p>Jest.config.js:</p>
  <pre><code>// jest.config.js
  const nextJest = require('next/jest');
  
  const createJestConfig = nextJest({
      // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
      dir: './',
  });
  
  // Add any custom config to be passed to Jest
  /** @type {import('jest').Config} */
  const customJestConfig = {
      // Add more setup options before each test is run
      // setupFilesAfterEnv: ['&lt;rootDir&gt;/jest.setup.js'],
      // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
      //moduleDirectories: ['node_modules', '&lt;rootDir&gt;/'],
      testEnvironment: 'jest-environment-jsdom',
  };
  
  // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
  module.exports = createJestConfig(customJestConfig);
  </code></pre>
  <p>test/page.test.js</p>
  <pre><code>import { render, screen } from '@testing-library/react';
  import Home from '../pages/index';
  
  describe('Home', () =&gt; {
      it('renders a heading', () =&gt; {
          render(&lt;Home /&gt;);
          expect(2 + 2).toBe(4);
      });
  }); 
  </code></pre>