Can't find a to make findAllByRole work but findAllbyText works fine.

[sanchitos]

Hi, I really don't know why trying to find by role throws an error, but findAllByText works perfectly, they are querying the same screen elements.

"@testing-library/angular": "^10.11.0",
"@testing-library/jest-dom": "^5.14.1",
"@angular/cli": "~10.2.0",

Component:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { JobsService } from '@app/shared/jobs.service';
import { Division } from '@app/shared/shared.models';

@Component({
  selector: 'app-home-career-oportunities',
  templateUrl: './career-oportunities.component.html',
  styleUrls: ['./career-oportunities.component.css'],
})
export class CareerOportunitiesComponent implements OnInit {
  dedicated = {} as Division;
  intermodal = {} as Division;
  noCdl = {} as Division;
  otr = {} as Division;

  constructor(private jobsService: JobsService, private router: Router) {}

  ngOnInit(): void {
    void this.jobsService.divisions().then((apiDivisions) => {
      this.dedicated = apiDivisions.find((c) => c.JobType === 'DEDICATED');
      this.intermodal = apiDivisions.find((c) => c.JobType === 'INTERMODAL');
      this.noCdl = apiDivisions.find((c) => c.JobType === 'NO_CDL');
      this.otr = apiDivisions.find((c) => c.JobType === 'OVER_THE_ROAD');
    });
  }
}

HTML

    <ul class="popu-category-bullets">
              <li class="text-dark" *ngFor="let bullet of dedicated.JobBullets">
                {{ bullet }}
              </li>
            </ul>

Test:

describe('Rendering...', () => {
  test('Render Component', async () => {
    const divisions2: Division[] = [
      {
        JobType: 'INTERMODAL',
        JobBullets: ['Local Routes', 'Flexible Schedules', 'Competitive Pay'],
        Description: '',
      },
      { JobType: 'NO_CDL', JobBullets: ['We Train', 'We Hire', 'We Pay'], Description: '' },
      {
        JobType: 'OVER_THE_ROAD',
        JobBullets: ['Great Miles', 'Competitive Pay', 'Explore the Country'],
        Description: '',
      },
      {
        JobType: 'DEDICATED',
        JobBullets: ['Regular Routes', 'Consistent Miles', 'Great Pay'],
        Description: '',
      },
    ];
    const jobService = createMock(JobsService);
    jobService.divisions = jest.fn(() => Promise.resolve(divisions2));

    await render(CareerOportunitiesComponent, {
      componentProviders: [
        {
          provide: JobsService,
          useValue: jobService,
        },
      ],
      imports: [ SomeModules ]
      ],
    });
    // const dedicated = await screen.findAllByRole('listitem');
    // throws error!
    // console.log(dedicated);
    const dedicated = await screen.findAllByText('Regular Routes');
    // works OK
  });
});

What screen.debug() shows:

Thanks

[timdeschryver]

I reproduced the test, but it seems to work here.
#255

[sanchitos]

I have no idea what's going on. But I will attempt to setup testing library again and see if the issue goes away.

If I can't make it by tuesday I will close the issue.

Thank you very much!