angular-testing-library: запрос getByRole работает только с опцией hidden: true

Question

Я просто пробую эту библиотеку и, похоже, не могу получить доступ к элементам с помощью их роли ARIA.

Я использую angular 10.0.6, jest 26.2.1 вместе с jest-preset-angular 8.2.1 и @testing-library/angular 10.0.1. Я считаю, что настроил проект, как описано в https://www.npmjs.com/package/jest-preset-angular и https://testing-library.com/docs/angular-testing-library/intro

вот мой компонент, который я пытаюсь протестировать:

<h1>{{title}}</h1>
<img src="../assets/chuck-norris-logo.jpg" alt="Chuck Norris Approves!">
<p role="status">{{jokeText}}</p>
<button (click)="refreshJoke()">Refresh</button>

и соответствующая часть некоторого теста:

test('refreshes joke on click', async () => {
    const component = await render(AppComponent);

    const button = component.getByRole('button');
    fireEvent.click(button);
  });

Однако я получаю сообщение об ошибке, что роль не найдена.

TestingLibraryElementError: Unable to find an accessible element with the role "button"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

<div
  id="root1"
  ng-version="10.0.6"
>
  <h1>
    Chuck Norris
  </h1>
  <img
    alt="Chuck Norris Approves!"
    src="../assets/chuck-norris-logo.jpg"
  />
  <p
    role="status"
  >
    Chuck Norris uses canvas in IE.
  </p>
  <button>
    Refresh
  </button>
</div>

Я могу обойти это, установив hidden возможность true.

import {configure} from '@testing-library/dom';

configure({
  defaultHidden: true
});

Как и другие функции запроса, которые я пробовал работать (например, getByText а также getByTestId) работают нормально, и я никогда не сталкивался с подобными проблемами с реакцией, думаю, я как-то испортил свою конфигурацию.

это мой полный package.json

{
  "name": "chuck-norris-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/forms": "~10.0.6",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/router": "~10.0.6",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.6",
    "@testing-library/angular": "^10.0.1",
    "@testing-library/jest-dom": "^5.11.2",
    "@types/jest": "^26.0.7",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jest": "^26.2.1",
    "jest-preset-angular": "^8.2.1",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setup-jest.ts"
    ]
  }
}

Я загрузил свое репо на GitHub. Что я сделал не так?

Answer 1

Я столкнулся с той же проблемой, и я решил свою проблему, удалив часть макетов браузера jest, на которую ссылались в разделе «Использование» для https://www.npmjs.com/package/jest-preset-angular#usage:

Я удалил из файла jest-global-mocks.ts следующее:

      Object.defineProperty(window, 'getComputedStyle', {
   value: () => {
      return {
         display: 'none',
         appearance: ['-webkit-appearance'],
      };
   },
});

Я видел похожие глобальные моки, на которые есть ссылки в таких статьях, как https://www.amadousall.com/how-to-set-up-angular-unit-testing-with-jest/ <-- в этой статье говорится: «Мокайте некоторые свойства и функции глобального объекта окна, чтобы убедиться, что наши тесты могут работать в среде JSDOM». но я недостаточно знаю, чтобы понять, является ли удаление этого хорошей идеей при использовании angular-testing-library (я также использую https://www.npmjs.com/package/@testing-library/jest-dom) . Может быть, кто-то еще может помочь объяснить вариант использования более подробно, но сейчас я просто рад, что могу снова использовать getByRole().