Angular 角度测试库：getByRole查询仅适用于hidden:true选项

我只是在尝试这个库，似乎无法通过元素的ARIA角色访问元素

我使用angular 10.0.6、jest 26.2.1以及jest预设angular 8.2.1和@testing library/angular 10.0.1。我相信已按照和中所述设置了项目

以下是我正在尝试测试的组件：

{{title}
{{jokeText}
刷新

以及一些测试的相关部分：

test（'单击后刷新'，异步（）=>{
常量组件=等待渲染（AppComponent）；
const button=component.getByRole（'button'）；
fireEvent。单击（按钮）；
});

但是，我收到一条错误消息，无法找到该角色

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>

由于我尝试使用的其他查询函数（如

getByText

和

getByTestId

）工作正常，而且我从未在react中遇到过类似的问题，我想我不知怎么搞砸了我的配置

这是我的完整包。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"
    ]
  }
}

{
“姓名”：“chuck norris ng”，
“版本”：“0.0.0”，
“脚本”：{
“ng”：“ng”，
“开始”：“ng发球”，
“构建”：“ng构建”，
“测试”：“玩笑”，
“测试：观察”：“开玩笑——观察”，
“皮棉”：“ng皮棉”，
“e2e”：“ng e2e”
},
“私人”：没错，
“依赖项”：{
“@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浏览器”：“~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”
},
“依赖性”：{
“@angular devkit/build angular”：“~0.1000.4”，
“@angular/cli”：“~10.0.4”，
“@angular/compiler cli”：“~10.0.6”，
“@测试库/角度”：“^10.0.1”，
“@测试库/jest dom”：“^5.11.2”，
“@types/jest”：“^26.0.7”，
“@types/node”：“^12.11.1”，
“codelyzer”：“^6.0.0”，
“笑话”：“^26.2.1”，
“开玩笑”：“^8.2.1”，
“量角器”：“~7.0.0”，
“ts节点”：“~8.3.0”，
“tslint”：“~6.1.0”，
“类型脚本”：“~3.9.7”
},
“笑话”：{
“预置”：“开玩笑预置角度”，
“SetupFileAfterEnv”：[
“/src/setup jest.ts”
]
}
}

---

我已将我的回购协议上载到。我做错了什么？

我遇到了同样的问题，我通过删除“用法”部分中引用的jest浏览器模拟解决了我的问题：

I删除了jest-global-mocks.ts文件中的以下内容：

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

---

我已经看到类似的全球模拟引用的文章，如感谢！我可以确认它工作完美无瑕！仅供参考，在