How do I get axe-core-react to check re-renders of my app?

694 Views Asked by At

I have an Ionic React app that I am trying to test using axe-core-npm

Here's my basic app setup:

const startAccessibilityTestingIfDebug = () => {
  if (showDebugInfo) {
    import('@axe-core/react').then((axe) => {
      axe.default(React, ReactDOM, 1000, config);
      startIonic();
    });
  } else {
    startIonic();
  }
};

const startIonic = () => {
  setupIonicReact();
  ReactDOM.render(<App />, document.getElementById('root'));
};

When I serve my app via npm run serve (Ionic is using CRA v5), then my app loads at localhost:8100 and I can see the axe errors in the browser's console-- but only for the initial page load.

Even if I navigate to different pages of my app (Ionic uses react-router v5), I don't see any new axe information. If I reload the page, I do see the new errors.

So, it seems like axe is only printing information for the initial page load, but it should be printing info for every component load. What am I doing wrong?

I found this tutorial on using axe to test accessibility, and the comments suggest other people are having the same problem. There is no solution identified in those comments.

0

There are 0 best solutions below