Is it possible to put test files under pages directory in Next.js?

by

TL;DR: While not possible by default, you can co-locate test files inside the pages folder by customising the pageExtensions option in next.config.js.

By default, Next.js will take into account any file ending with tsx, ts, jsx or js under the pages folder for the purpose of building pages/API routes and routing.

From the Custom Page Extensions documentation:

Next.js assumes every tsx/ts/jsx/js file in the pages directory is a
page or API route, and may expose unintended routes vulnerable to
denial of service attacks, or throw an error like the following when
building the production bundle

Adding a file named index.test.ts in the pages folder (or any subfolder) will include that file as an actual page, and potentially throw errors during build time.

You can circumvent this by modifying the extensions Next.js expects using the pageExtensions property in next.config.js.

module.exports = {
    // Default value is ['tsx', 'ts', 'jsx', 'js']
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

With this configuration, only pages with the above extensions will be taken into account. So you could have the following pages folder structure, with co-located test files.

pages/
├─ api/
│   ├─ path.page.ts
│   └─ path.test.ts
├─ _app.page.ts
├─ _document.page.ts
├─ index.page.ts
└─ index.test.ts

Both path.test.ts and index.test.ts would be ignored.

More Related Contents:

  1. How to mock functions in the same module using Jest?
  2. Jest: Timer and Promise don’t work well. (setTimeout and async function)
  3. How can I use Jest to spy on a method call?
  4. Simulate a button click in Jest
  5. Jest spyOn function called
  6. How can I mock an ES6 module import using Jest?
  7. Jest mock inner function
  8. Can Protractor and Karma be used together?
  9. Jest: How to mock one specific method of a class
  10. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  11. How to properly set environment variables in Next.js app deployed to Vercel?
  12. Warning: Function components cannot be given refs
  13. Non-angular page opened after a click
  14. Simulate drop file event
  15. How to change mock implementation on a per single test basis?
  16. Message “Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout”
  17. How to mock a constructor like new Date()
  18. Environment variables not working (Next.JS 9.4.4)
  19. How to change the behaviour of a mocked import?
  20. How do I set a mock date in Jest?
  21. What is the best way to have a fallback image in NextJS?
  22. mocha pass variable to the next test
  23. Accessing Angular inside Protractor Test
  24. How to deal with NextJS exporting files with .html extension but in there is no .html
  25. What’s the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?
  26. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  27. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  28. How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it’s returning undefined
  29. Want to have an event handler for the browser’s back button with next.js
  30. XMLHttpRequest testing in Jest

Leave a Comment