Allow jest-playwright settings in jest.config.js

Is your feature request related to a problem? Please describe.

While not a critical issue, allowing jest-playwright settings to live inside of the standard jest.config.js file would simplify the configuration (fewer config files) and make it easier to understand how Jest is configured by allowing more (hopefully, all) settings to live in one place.

As a real-world example, I am currently working on an open-source project that uses jest-playwright for e2e tests but only Jest for unit and integration tests. You can view the work-in-progress implementation here:

• https://github.com/docsifyjs/docsify/tree/jest-playwright/tests

I’m using Jest’s projects option to unify configurations for all test types. Because jest-playwright’s config exists in a separate file that only applies to a single test type (e2e), I’ve moved jest-playwright.config.js into the /tests/e2e/config/ folder, which means my Jest configuration is now split between /jest.config.js and /tests/e2e/config/jest-playwright.config.js. Everything works as expected, but understanding the overall test setup is more difficult for new contributors because configuration files are scattered throughout the project.

Describe the solution you’d like

Allow jest-playwright settings live in jest.config.js using a "jest-playwright" property name:

// jest.config.js
module.exports = {
  'jest-playwright': {
    browsers: [
      'chromium',
      'firefox',
      'webkit',
    ]
  }
};

Jest-playwright settings should also be allowed to live under a camelCase jestPlaywright property name. This format is consistent with Jest’s property name convention:

// jest.config.js
module.exports = {
  jestPlaywright: {
    // ...
  }
};

The configuration should also work for those using Jest’s projects option. Hopefully this will “just work” because of how Jest operates, but I wanted to mention it since Jest projects provide an easy way to isolate jest-playwright to e2e tests.

// jest.config.js
module.exports = {
  projects: [
    // Unit Tests (Jest)
    {
      displayName: 'unit',
      testMatch: ['<rootDir>/tests/unit/*.test.js'],
    },
    // Integration Tests (Jest)
    {
      displayName: 'integration',
      testMatch: ['<rootDir>/tests/integration/*.test.js'],
    },
    // E2E Tests (Jest + Playwright)
    {
      displayName: 'e2e',
      testMatch: ['<rootDir>/tests/e2e/*.test.js'],
      preset: 'jest-playwright-preset',
      jestPlaywright': {
        browsers: [
          'chromium',
          'firefox',
          'webkit',
        ]
      }
    }
  ]
};

(Note above that I personally prefer the camelCase jestPlaywright property name for consistency).

[jhildenbiddle]

@mmarkelov –

What about leveraging Jest’s testEnvironmentOptions option? The documentation states the following:

Test environment options that will be passed to the testEnvironment. The relevant options depend on the environment. For example you can override options given to jsdom such as {userAgent: "Agent/007"}.

Perhaps I’m misunderstanding the difference between “environment” and “preset”, but my understanding is that when Jest is configured with preset: jest-playwright-preset, jest-playwright-preset is the environment. If this is the case, then it seems like jest-playwright options could be passed in jest.config.js as follows:

// jest.config.js
module.exports = {
  preset: 'jest-playwright-preset',
  testEnvironmentOptions: {
    // jest-playwright options here...
    browsers: [
      'chromium',
      'firefox',
      'webkit',
    ]
  }
};

[mmarkelov]

Also I found that ts-jest for example use global property to pass config with jest.config.js:

// jest.config.js:

module.exports = {
 ...,
  globals: {
    'ts-jest': {
      ...,
    },
  },
};