Testing in Next.js While using Next-Intl

Never really done tests before, so I thought I'd try it out with the Sundar Clinic Website Code. At first, I thought I'd go with Jest in Next.js 1, failed to get it working as I was getting a couple of errors,

Text Encoder & Decoder Error

This was because I was trying to run tests in a different environment (jsdom and node), so I needed to ensure they were configured properly.

The fix 2 for this was quite straightforward, just had to include this in the Jest Setup file.

beforeAll(async () => {
  global.TextEncoder = require('util').TextEncoder;
  global.TextDecoder = require('util').TextDecoder;
});

Unable to run next-intl with jest

Even after configuring the environment and file-specific environments, still was not able to run the tests using Jest over here. So played around with the playwright 3, but didn't move forward with its component testing is still experimental 4, then changed to testing with cypress instead 5.

Cypress

Setting it up from the Next.js docs was straight forward and didn't take much time to write the tests as it had common things that could be replicated from Jest.

For now, I've used to to run SEO optimization tests on all pages for all locales in the Sundar Clinic Repo, and playing around with the component testing which by the way is working fine with next-intl, so looking forward to using this in other projects as well.

Also if there's too many tests to run, you can run specific files alone using the --spec flag in the cypress CLI. 6

npx cypress run –spec “cypress/integration/sanity.cy.js”

Footnotes

  1. https://nextjs.org/docs/app/building-your-application/testing/jest ↩

  2. How To Resolve The Error 'Textencoder Is Not Defined Jest’ ↩

  3. https://nextjs.org/docs/pages/building-your-application/testing/playwright ↩

  4. https://playwright.dev/docs/test-components ↩

  5. https://nextjs.org/docs/pages/building-your-application/testing/cypress ↩

  6. https://www.browserstack.com/guide/cypress-skip-test ↩

← Back to all logs