我只是在尝试这个库,似乎无法通过他们的 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
and 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"
]
}
}
我已将我的 repo 上传到GitHub。我做错了什么?