title: How to load environment variable in tests with Next.js?
body: <p>I'm trying to run a simple test with JavaScript as below.</p>
  <pre><code>import React from 'react';
  import Customization from 'components/onboarding/customization';
  import '@testing-library/jest-dom';
  import { render, screen, fireEvent } from '@testing-library/react';
  
  describe('customization render', () =&gt; {
    it('should render the Hero page with no issue', () =&gt; {
      render(&lt;Customization /&gt;);
  
      const heading = screen.getByText(
        /All the Moodmap at one place!/i
      );
  
      expect(heading).toBeInTheDocument();
    });
    it(&quot;should call onCLick method on click&quot;, () =&gt; {
      const mockOnClick = jest.fn()
  
      const {container} = render(&lt;Customization /&gt;);
  
      const button = getByTestId(container, 'alreadyDownloaded');
      fireEvent.click(button);
      expect(mockOnClick).toHaveBeenCalledTimes(1)
  
  
      // const mockOnClick = jest.fn()
      // const utils = render(&lt;Customization onClick={mockOnClick} /&gt;)
      // fireEvent.click(screen.getByText(/already downloaded ⟶/i))
      // expect(mockOnClick).toHaveBeenCalledTimes(1)
    })
  });
  </code></pre>
  <p>When running the tests I'm getting this error</p>
  <pre><code>No google analytics trackingId defined
  
     8 |   debug: process.env.NODE_ENV !== 'production',
     9 |   plugins: [
  &gt; 10 |     googleAnalyticsPlugin({
       |     ^
    11 |       trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
    12 |     }),
  </code></pre>
  <p>How do I make this error go away - surely it shouldn't require Google Analytics code given the above, it's not in production when running the test?</p>
  <h3>Update</h3>
  <p>So I need to make sure the <code>.env</code> file is being loaded!</p>
  <p>In my <code>package.json</code> I've got this Jest setup:</p>
  <pre><code>&quot;jest&quot;: {
      &quot;testMatch&quot;: [
        &quot;**/?(*.)(spec|test).?(m)js?(x)&quot;
      ],
      &quot;moduleNameMapper&quot;: {
        &quot;\\.(css|less|scss)$&quot;: &quot;identity-obj-proxy&quot;
      },
      &quot;moduleDirectories&quot;: [
        &quot;node_modules&quot;,
        &quot;src&quot;
      ],
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;moduleFileExtensions&quot;: [
        &quot;js&quot;,
        &quot;jsx&quot;,
        &quot;mjs&quot;
      ],
      &quot;transform&quot;: {
        &quot;^.+\\.m?jsx?$&quot;: &quot;babel-jest&quot;
      },
      &quot;coverageThreshold&quot;: {
        &quot;global&quot;: {
          &quot;branches&quot;: 80,
          &quot;functions&quot;: 80,
          &quot;lines&quot;: 80,
          &quot;statements&quot;: -10
        }
      }
    },
  </code></pre>
  <h3>updated code to use jest.setup - can't get env to load</h3>
  <p>So</p>
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  import &quot;@testing-library/jest-dom&quot;;
  
  configure({
      adapter: new Adapter()
  });
  
  module.exports = {
    testMatch: [
      &quot;**/?(*.)(spec|test).?(m)js?(x)&quot;
    ],
    moduleNameMapper: {
      &quot;\\.(css|less|scss)$&quot;: &quot;identity-obj-proxy&quot;
      },
    moduleDirectories: [
      &quot;node_modules&quot;,
      &quot;src&quot;
      ],
      rootDir: &quot;src&quot;,
    moduleFileExtensions: [
      &quot;js&quot;,
      &quot;jsx&quot;,
      &quot;mjs&quot;
    ],
    transform: {
      &quot;^.+\\.m?jsx?$&quot;: &quot;babel-jest&quot;
      },
  coverageThreshold: {
      &quot;global&quot;: {
          &quot;branches&quot;: 80,
          &quot;functions&quot;: 80,
          &quot;lines&quot;: 80,
          &quot;statements&quot;: -10
      }
      },
      setupFiles: [&quot;../&lt;rootDir&gt;/.config.env.test&quot;]
  
  };
  </code></pre>
  <p>The environment variable files is here:</p>
  <pre><code>process.env.NEXT_PUBLIC_GA_TRACKING_ID=xxx
  </code></pre>
  <p>And this is the code that is not loading the environment variables properly.</p>
  <pre><code>import Analytics from 'analytics';
  import googleAnalyticsPlugin from '@analytics/google-analytics';
  import Router from 'next/router';
  
      // Initialize analytics and plugins
      // Documentation: https://getanalytics.io
      const analytics = Analytics({
        debug: process.env.NODE_ENV !== 'production',
        plugins: [
          googleAnalyticsPlugin({
            trackingId: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
          }),
        ],
      });
  </code></pre>