使用 axe 进行 React Native 测试：所有页面内容都应包含在地标（区域）中

Question

我正在尝试使用jest-axe引入可访问性测试。

唯一的问题是我使用的是JSX而不是html ，所以我的第一个问题是是否可以将 ax 与JSX组件一起使用。

如果可能，解决错误的措施是什么：

“所有页面内容都应包含在地标（区域）中”？

我正在尝试一个示例组件：

        <View>
            <Text>Hello</Text>
        </View>

并使用 ax 测试可访问性错误：

describe("Sample Component", () => {
    it("Should check for accessibility issues", () => {
        const wrapper = mount(
            <SampleComponent></SampleComponent>
          );
          const results = await axe(wrapper.getDOMNode());
      
          expect(results).toHaveNoViolations();
    });
});

Answer 1

在撰写本文时 02-06-2022

正如Aryella Lacerda 在她的文章中强调的那样，Axe 与 react-native 不兼容

但是，Ax 仅支持基于 HTML 的语言，遗憾的是不支持 React Native。

幸运的是，她创建了React Native Accessibility Engine ，这是一个测试库，允许您利用React Native Accessibility API对可访问性做出断言。 它与 jest 集成，使向现有测试添加可访问性测试变得轻而易举。 她的文章还包括使 React Native 应用程序易于访问的策略。

Scott Vinkle 的这篇文章是创建可访问的 React Native 应用程序的另一个重要资源。