angular/components · error · Error

Cannot find chip matching filter ${JSON.stringify(filter)}

Error message

Cannot find chip matching filter ${JSON.stringify(filter)}

What it means

The MatChipListboxHarness's selectChips test helper resolves child chips matching the given harness filter and throws if none are found. This is a fail-fast guard so tests don't silently no-op when the expected chips are absent.

Source

Thrown at src/material/chips/testing/chip-listbox-harness.ts:78

  }

  /**
   * Gets the list of chips inside the chip list.
   * @param filter Optionally filters which chips are included.
   */
  async getChips(filter: ChipOptionHarnessFilters = {}): Promise<MatChipOptionHarness[]> {
    return this.locatorForAll(MatChipOptionHarness.with(filter))();
  }

  /**
   * Selects a chip inside the chip list.
   * @param filter An optional filter to apply to the child chips.
   *    All the chips matching the filter will be selected.
   */
  async selectChips(filter: ChipOptionHarnessFilters = {}): Promise<void> {
    const chips = await this.getChips(filter);
    if (!chips.length) {
      throw Error(`Cannot find chip matching filter ${JSON.stringify(filter)}`);
    }
    await parallel(() => chips.map(chip => chip.select()));
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Verify the filter (text etc.) matches a rendered chip exactly.
2. Await rendering before querying (await fixture.whenStable() / harness waitForTasksOutsideAngular patterns).
3. First list chips via getChips() and assert the set before selecting.
4. Confirm the harness used corresponds to the actual component (chip-listbox vs chip-grid harness).

Example fix

// before
await harness.selectChips({ text: 'Angular 13' });
// after
const chips = await harness.getChips();
if (!chips.some(c => c.getText().then(t => t.includes('Angular')))) {
  fail('Expected chip not rendered');
}
await harness.selectChips({ text: 'Angular' });

const chips = await harness.getChips(filter);
if (!chips.length) {
  fail(`No chips match filter ${JSON.stringify(filter)}`);
}

try {
  await harness.selectChips({ text: 'Expected' });
} catch (e) {
  if (e instanceof Error && e.message.includes('Cannot find chip matching filter')) {
    const all = await harness.getChips();
    fail(`Chips available: ${JSON.stringify(await Promise.all(all.map(c => c.getText())))}`);
  } else { throw e; }
}

When it happens

Trigger: Calling harness.selectChips({...}) with a filter (e.g. by text) that matches no rendered chip, or calling it when the chip list is empty/not yet rendered.

Common situations: Test runs before Angular has finished rendering (missing await for render/fixtures), wrong chip label text or case, chips filtered out by user input, or testing against a chip-grid instead of chip-listbox.

Related errors

• No selected tab could be found.
• No active link could be found.
• Unable to retrieve options for timepicker. Timepicker panel
• Could not find tile at given position.
• Unable to retrieve options for autocomplete. Autocomplete pa

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/0a76b79cf086b0d2. Report an issue: GitHub.