Error "Component 'xyz' is not resolved" with `@jscutlery/cypress-harness`

[decline]

Issue:

Hi - I wanted to use @jscutlery/cypress-harness and followed the instructions how to set it up. It is working for official Angular Material Harnesses (like MatButtonHarness):

import { getHarness } from '@jscutlery/cypress-harness';
import { MatButtonHarness } from '@angular/material/button/testing';

describe('cypress-harness-app', () => {
  beforeEach(() => cy.visit('/'));

  it('should get button text with MatButtonHarness', () => {
    // THIS IS WORKING 🎉
    const harness = getHarness(MatButtonHarness);
    harness.getText().should('eq', 'Demo button');
  });
});

But as soon as I want to use one of my own harnesses, it fails with the following error:

import { getHarness } from '@jscutlery/cypress-harness';
import { DemoButtonComponentHarness } from '@cypress-harness/demo';

describe('cypress-harness-app', () => {
  beforeEach(() => cy.visit('/'));

  it('should get button text with DemoButtonComponentHarness', () => {
    // THIS IS NOT WORKING 😭
    const harness = getHarness(DemoButtonComponentHarness);
    harness.getText().should('eq', 'Demo button');
  });
});

How to reproduce:

I have set up a small Nx based repository to reproduce this error here: decline/cypress-harness

Steps to reproduce:

# clone repository
git clone [email protected]:decline/cypress-harness.git

# install dependencies
cd cypress-harness && npm install

# run cypress
ng e2e cypress-harness-app-e2e --watch

The spec file is located here apps/cypress-harness-app-e2e/src/integration/app.spec.ts

---

Maybe I just overlooked some important thing, but I can't figure out a solution. Any help is appreciated 🙂

[edbzn]

Hi @decline, first of all, thanks for this well-described issue, it's much appreciated!

I ran the reproduction and it seems that using inline resources for the DemoButtonComponent fixes the test:

@Component({
  selector: 'cypress-harness-demo-button',
  template: '<button mat-button>Demo button</button>',
})
export class DemoButtonComponent {}

I don't know yet if it's related to the new version of Angular, but in any case we have an issue with external resources. I will dig into that later because I plan to be away from the screen for the weekend. Will come to you later!

[decline]

Hi @edbzn, thanks for the quick reply! I can confirm that it will work when using inline resources! Sadly this is not an option for me, as in my app there are hundreds of components that I would need to adjust.

This issue is also not only affecting the Component that is connected to the Harness, but also all other components of my used module. For example I added a new component HeaderComponent to my module (see this commit) and I'm not even using this component in my application. Still the test will then complain that Component 'HeaderComponent' is not resolved as soon as I add this component to the declerations of my module.

Thanks for your support so far, I hope there is a solution to this problem :)

[david-eps]

Hi @decline @edbzn I'm having exactly the same issue, also with an NX based app. The root cause is when importing harnesses from components that reside in different domains. Looks like @jscutlery/cypress-harness has trouble resolving the Nx domain imports (@domain/....)

in the demo repository, try this: app.spec.ts - line 3 instead of: import { DemoButtonComponentHarness } from '@cypress-harness/demo'; write: import { DemoButtonComponentHarness } from 'libs/demo/src/lib/demo-button/demo-button.component.harness'; and the test passes

[srqdeveloper]

My team experienced something similar. The solution for us was to separate the test harnesses from the components they interact with, into a secondary entry point (Nx setup). You'll notice that is what Angular Material does as well.