Right jest testEnvrionment to use for both SSR and client

[gone]

I have a custom link component that extends the material ui link component and has some extra behavior to handle external links by looking at the current window.location.protocol and setting target if it's offsite. I have two Jest unit tests for this component to check both that it renders using material ui's createMount wrapper around enzyme and that the offsite linking logic works. My logic for getting the current url is: const checkHref = window.location.protocol + '//' + window.location.host;

This works great once the app has loaded client side, and it passes my jest test. But if I attempt to SSR this component I get an error "window is not defined". Great, so I'll switch to node for the testEnvironment - now my createMount test fails. How can I write a test for this component that will correctly fail on SSR, but pass on client side rendering?

[eric-burel]

Hi, I've had the same question and I've checked Blitz.js approach: they use node as testEnvironment but load JSDOM manually during the setup in a jest.setup.js file, so you get best of both world.
https://github.com/blitz-js/blitz/blob/canary/packages/cli/jest.config.js
https://github.com/blitz-js/blitz/blob/canary/packages/core/jest.setup.js
Edit: actually they seem to simply load test utils jest-dom, which I confused with jsdom.

This is the warning I get using Mongoose + jsdom environment:

      Mongoose: looks like you're trying to test a Mongoose app with Jest's default jsdom test environment. Please make sure you read Mongoose's docs on configuring Jest to test Node.js apps: http://mongoosejs.com/docs/jest.html

[eric-burel]

Official example is less explicit:https://github.com/vercel/next.js/tree/canary/examples/with-jest. So it seems to use the default jsdom but you may have trouble when testing API routes.

And Next Right Now is using node as the testEnvironment but I can't tell how they load the JSDOM.

[eric-burel]

My quickfix for now is using a second server-only Jest config with this config:

// Test server only code
// Files ending with "test.server" or "test.client"
const mainConfig = require("./jest.config");

module.exports = {
  ...mainConfig,
  testEnvironment: "node",
  testMatch: ["**/?(*.)+(spec|test).server.[tj]s?(x)"],
};

And I name my test foobar.test.server.ts => only this config will run it.

[SujayPrabhu96]

Hey @eric-burel This solution is not working for me. Have you come across any other solution ?

[philwolstenholme]

I noticed that Blitz use Jest projects to have server-side (node) and client-side (jsdom) Jest tests: https://github.com/blitz-js/blitz/blob/canary/packages/blitz/jest-preset.js#L50-L82

[ryan-creator]

After a bit of difficulty I managed to utilize Jest projects to create separate configurations for server-side (node) and client-side (jest-environment-jsdom) tests.

Here's how I do it in my project.

// jest.config.mjs
import nextJest from "next/jest.js";

const createJestConfig = nextJest({
    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
    dir: "./",
});

const clientTestConfig = {
    displayName: "client",
    testEnvironment: "jest-environment-jsdom",
    testMatch: ["**/__tests__/client/*.[jt]s?(x)"],
    setupFilesAfterEnv: ["<rootDir>/config/jest.setup.ts"],
};

const serverTestConfig = {
    displayName: "server",
    testEnvironment: "node",
    testMatch: ["**/__tests__/server/*.[jt]s?(x)"],
    setupFilesAfterEnv: ["<rootDir>/config/jest.setup.ts"],
};

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
    // Add more setup options before each test is run
    projects: [await createJestConfig(clientTestConfig)(), await createJestConfig(serverTestConfig)()],
};

export default config;

[kant003]

perfect solution

[adamliang0]

That was helpful thank you.