[React ARIA Testing] Test Accessibility of Rendered React Components with jest-axe
React of with test Testing Components jest ARIA
2023-09-14 09:00:47 时间
While not all of accessibility testing of a web application can be automated, much of it can be and quite easily using axe-core and jest-axe. Let’s see how to integrate this with React Testing Library to help catch common accessibility issues.
import React from 'react' import 'jest-axe/extend-expect' import { axe } from 'jest-axe' import { render } from '@testing-library/react' function InaccessibleForm() { return ( <form> <input placeholder="email" /> </form> ) } function AccessibleForm() { return ( <form> <label htmlFor="username">Username</label> <input id="username" placeholder="username" /> </form> ) } test('inaccessible forms fail axe', async () => { const { container } = render(<InaccessibleForm />) expect(await axe(container)).not.toHaveNoViolations() }) test('accessible forms pass axe', async () => { const { container } = render(<AccessibleForm />) expect(await axe(container)).toHaveNoViolations() })
相关文章
- [Web 前端] 我不再使用React.setState的3个原因
- react的3种组件
- [React Testing] Write React Application Integration Tests with React Testing Library
- [React Testing] Test React Component Event Handlers with fireEvent from React Testing Library
- [React] Use CSS Transitions to Avoid a Flash of Loading State
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
- [React Native] Animate Styles of a React Native View with Animated.timing
- [React] useAsync
- [React Testing] Use React Testing Library’s Wrapper Option to Simplify using rerender
- [React] Create a Persistent Reference to a Value Using React useRef Hook
- [Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
- [React] Use React.cloneElement to Extend Functionality of Children Components
- [React Fundamentals] Component Lifecycle - Mounting Usage
- SAP UI5和React的页面渲染性能比较
- windows环境里React-Native运行失败的原因之一,缺少依赖
- React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解
- React(四)React生命周期、发送网络请求、跨域处理