Question

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

我使用角度10.0.6，玩笑26.2.1以及玩笑预设角度8.2.1和@ testing-library /角度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）工作正常并且我从未遇到过类似的react问题时，我想我以某种方式弄乱了配置。

这是我完整的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 浏览器模拟解决了我的问题：

我从 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()。

angular-testing-library：getByRole查询仅与hidden：true选项一起使用

1 个答案: