React Native使用axe做可访问性测试：解决内容需包含在landmark(region)区域报错

1. jest-axe 是否可以和JSX组件配合使用？ #

完全可以。jest-axe的检测逻辑是基于组件渲染生成的真实DOM节点，和源码使用JSX还是原生HTML编写无关，只要你能通过测试框架拿到组件渲染后的DOM实例，就可以正常执行可访问性检测。

2. "All page content should be contained by landmarks (region)"报错解决方案 #

这个报错是axe的基础可访问性规则要求：所有页面可见内容必须被包裹在语义化地标区域内（如<main>、<header>、<footer>、带role属性的区域等），你当前的<View>组件渲染后对应无语义属性的普通容器（如<div>），内容未被地标包裹就会触发报错。
你可以根据组件的使用场景选择以下任意一种解决方案：

方案一：修改组件添加语义属性（适用于页面级组件） #

如果你的组件是独立的页面级组件，直接给外层容器添加对应的语义标识即可：

<View role="main">
    <Text>Hello</Text>
</View>

也可以直接替换为原生语义标签，比如用<main>代替无属性的<View>。

方案二：测试时外层包裹地标容器（适用于公共业务组件） #

如果你的组件是被嵌套在页面其他地标区域内使用的公共组件，不需要自身携带地标属性，只需要在测试代码中给外层套一个符合规则的地标容器即可，同时注意你原测试代码中使用了await，需要给测试回调添加async标识否则会报错：

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

方案三：临时禁用该规则（仅特殊场景推荐使用） #

如果明确不需要检测该规则，可以在调用axe时传入配置禁用region规则：

const results = await axe(wrapper.getDOMNode(), {
  rules: {
    region: { enabled: false }
  }
});

内容的提问来源于stack exchange，提问作者Miguel Rodríguez