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

我遇到了同樣的問題，我通過刪除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/等文章中看到了類似的全局模擬 <--這篇文章說“模擬一些屬性和全局 window object 的功能，以確保我們的測試可以在 JSDOM 環境中運行。” 但我不知道在使用 angular-testing-library 時刪除它是否是一個好主意（我也在使用https://www.npmjs.com/package/@testing-library/jest-dom ） . 也許其他人可以幫助更詳細地解釋用例，但現在我很高興我可以再次使用 getByRole() 。