Karma Files and Patterns

The files array decides exactly which files Karma serves to the browser, in what order, and how. This lesson covers glob patterns and the fine-grained object syntax that controls loading behavior precisely.

Simple Glob Patterns

In the simplest case, each entry in files is a glob pattern string. Karma expands each pattern into a list of matching files at startup (and again on changes, in watch mode), then injects a <script> tag for each match into the generated context page, in the order the patterns were listed.

config.set({
  basePath: '',
  files: [
    'node_modules/some-polyfill/dist/polyfill.js',
    'src/**/*.js',
    'src/**/*.spec.js'
  ]
});

Order matters for plain scripts: a polyfill or shared dependency should usually be listed before the files that rely on it.

The Object Syntax for Fine-Grained Control

files: [
  {
    pattern: 'src/assets/**/*.png',
    included: false,   // don't inject a <script> tag
    served: true,       // but do serve it if requested
    watched: false      // don't rerun tests when it changes
  }
]

pattern is required; every other key has a sensible default.
included: false is essential for non-script assets like images, fonts, or JSON fixtures.
served: true (default) makes the file reachable over HTTP even if not auto-injected as a script.
watched: false prevents Karma from triggering reruns for files that change often but don't affect test outcomes.

Files Pattern Cheat Sheet

Default values and what each flag controls.

Flag	Default	Meaning
`pattern`	(required)	Glob pattern of files to match
`included`	`true`	Inject as a `<script>` tag automatically
`served`	`true`	Make reachable over HTTP by the Karma server
`watched`	`true`	Trigger reruns when matched files change
`nocache`	`false`	Disable browser caching for this pattern

Excluding Files with exclude

The exclude array removes specific files from whatever files already matched, using the same glob syntax. It's commonly used to filter out files a broad glob accidentally swept in.

config.set({
  files: ['src/**/*.js'],
  exclude: ['src/**/*.e2e.js', 'src/legacy/**/*.js']
});

Loading Non-Script Fixtures

JSON fixtures, HTML templates, or images used by tests (for example, via karma-fixture) need to be served but must never be injected as <script> tags, since the browser would fail trying to parse them as JavaScript.

files: [
  { pattern: 'test/fixtures/**/*.json', included: false, served: true, watched: true },
  'src/**/*.spec.js'
]

Fixtures are typically fetched by test code at runtime via an HTTP request to their served URL, rather than injected as scripts.

Common Mistakes

Forgetting included: false for non-JavaScript assets, causing browser parse errors.
Relying on glob ordering for module-bundled projects where a bundler (like webpack) already manages dependency order.
Over-broad glob patterns that accidentally sweep in test helpers or fixtures as if they were spec files.
Not using exclude when a single broad pattern is simpler to write than several narrow ones.

Key Takeaways

files entries can be simple glob strings or objects with included/served/watched flags.
included: false is required for any file that shouldn't be injected as a <script> tag.
exclude filters out specific matches from an otherwise broad files pattern.
File order matters for plain scripts, but is largely irrelevant once a bundler preprocessor is involved.

Pro Tip

When a spec file mysteriously never runs, temporarily log config.files (or run with logLevel: config.LOG_DEBUG) to see the exact resolved file list Karma computed. It's the fastest way to catch a glob pattern that isn't matching what you expect.