Are setupFiles and globals config options linked?

[mrmartineau]

To clarify, I just setup Vitest with this (simplified) config:

export default defineConfig({
  test: {
    environment: 'happy-dom',
    globals: true,
    setupFiles: ['./vitest.setup.ts'],
  },
});

With this config, the test runs fine without any issues, but when I removed the globals option my tests failed with this error:

 FAIL  src/components/ComponentName/ComponentName.test.tsx [ src/components/ComponentName/ComponentName.test.tsx ]
ReferenceError: expect is not defined
 ❯ Object.<anonymous> node_modules/@testing-library/jest-dom/dist/extend-expect.js:9:1
 ❯ Object.<anonymous> node_modules/@testing-library/jest-dom/dist/index.js:3:1
      1| "use strict";
      2|
      3| require("./extend-expect");
       | ^

FYI my vitest.config.ts has this:

import { installGlobals } from '@remix-run/node/globals';
import '@testing-library/jest-dom';

installGlobals();

This leads me to conclude that the setupFiles option is only used when globals is true, is that correct? Have I missed something in the docs?

[sheremet-va]

No, setupFiles is always running. Its just you are using library that expects “expect” to be defined globally

[mrmartineau]

ah ok, so to fix the "error", I should add import https://github.com/testing-library/jest-dom; to each test file that makes use of the jest-dom matchers?

[sheremet-va]

How did you come to this conclusion?

If you want to use @testing-library/jest-dom, but don't want to use globals, you need to import matchers and extend them yourself:

// setupFile
import matchers from '@testing-library/jest-dom/matchers'
import { expect } from 'vitest'

expect.extend(matchers)

[mrmartineau]

🤦 apologies, that was a copy/paste error I meant import '@testing-library/jest-dom' but I quickly found that it doesn't work as expected. After some more searching I found the same result as you from here.

Thanks for your help