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 and 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 的 '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/ <-- this article says "Mock some properties and functions of the global window object to make sure our tests can run in a JSDOM environment." but I don't know enough to understand whether removing this is a good idea when using the angular-testing-library (I am also using https://www.npmjs.com/package/@testing-library/jest-dom 等文章中看到过类似的全局模拟。也许其他人可以帮助更详细地解释用例，但现在我很高兴我可以再次使用 getByRole()。

angular-testing-library: getByRole 查询仅适用于 hidden: true 选项

angular-testing-library: getByRole query works only with hidden: true option

jestjs

angular

angular-testing-library