Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BUG: Getting error when trying to implement "logToConsole(..)" #858

Closed
1 task done
padmavemulapati opened this issue Oct 9, 2023 · 2 comments
Closed
1 task done

BUG: Getting error when trying to implement "logToConsole(..)" #858

padmavemulapati opened this issue Oct 9, 2023 · 2 comments
Assignees
@michael-siek
Labels
PRIORITY: high High priority item; should be scheduled in this or next sprint TYPE: qa bug Bug that was found during the QA process

Comments

@padmavemulapati
Copy link

padmavemulapati commented Oct 9, 2023 •
edited
Loading

Product

react

Product Version

4.7.4-62fd241.0

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

logToConsole(axeResults), should return axe-results

Actual

Giving Error:

console.group
      New axe issues

      at Function.logToConsole (node_modules/@axe-core/react/dist/index.js:284:11)

 FAIL  src/App.test.js
  ✕ renders learn react link (44 ms)

  ● renders learn react link

    TypeError: Cannot read properties of undefined (reading 'forEach')

       6 | test('renders learn react link', () => {
       7 |   const result = render(<App />);
    >  8 |   axe.logToConsole(result);
         |       ^
       9 |   
      10 | });
      11 |

      at Function.logToConsole (node_modules/@axe-core/react/dist/index.js:285:22)
      at Object.<anonymous> (src/App.test.js:8:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.774 s, estimated 2 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

How to Reproduce

Tried with React

  1. React code - App.test.js
import App from './App';
import axe from '@axe-core/react';


test('renders learn react link', () => {
  const result = render(<App />);
  axe.logToConsole(result);

});

import React from 'react';
import Button from './Button.mjs';


const App = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <h1>Welcome to my app</h1>
      <Button onClick={handleClick}>Click me</Button>
    </div>
  );
};

export default App;

Issues:

console.group
      New axe issues

      at Function.logToConsole (node_modules/@axe-core/react/dist/index.js:284:11)

 FAIL  src/App.test.js
  ✕ renders learn react link (44 ms)

  ● renders learn react link

    TypeError: Cannot read properties of undefined (reading 'forEach')

       6 | test('renders learn react link', () => {
       7 |   const result = render(<App />);
    >  8 |   axe.logToConsole(result);
         |       ^
       9 |   
      10 | });
      11 |

      at Function.logToConsole (node_modules/@axe-core/react/dist/index.js:285:22)
      at Object.<anonymous> (src/App.test.js:8:7)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.774 s, estimated 2 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

Screenshot

image

It identified the function logToConsole(result) and started looking for the New issues - but unable to return the value

image

Environment:

Label Value
Product axe-core-npm/react
Version 4.7.4-62fd241.0
OS-Details _MAC- Intel Core i7 - 11.6.8 & Windows11 _
BrowserDetails Chrome Version 117.0.5938.88 (Official Build) (64-bit) & Firefox 117.0
@padmavemulapati padmavemulapati added TYPE: qa bug Bug that was found during the QA process PRIORITY: high High priority item; should be scheduled in this or next sprint labels Oct 9, 2023
@padmavemulapati
Copy link
Author

It is blocking the release as RC having the feature

@padmavemulapati padmavemulapati mentioned this issue Oct 10, 2023
Closed
@padmavemulapati
Copy link
Author

This is not actually an issue, but the way results rendered to console to specific requirement. i.e.,"Request: Export the default logToConsole logger" so that it cannt be considered as a feature, which can implement all over the packages.

It can be applicable only for the react-componants, those can be rendered to the browsers and browser's devtools console would be showing the logs for New Issues

Steps validated:

  1. create a component
<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="container"></div>
    <img src=""/>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html {
        font: 14px normal Arial, sans-serif;
        color: #626771;
        background-color: #fff;
      }

      body {
        padding: 60px;
        text-align: center;
      }

      h1 {
        font-size: 18px;
        margin-bottom: 20px;
      }
    </style>
    <script src="dist/bundle.js"></script>
  </body>
</html>
  1. configure the axe to the componant
const axeConf = {
  rules: [
    { id: 'heading-order', enabled: true },
    { id: 'label-title-only', enabled: true },
    { id: 'image-alt', enabled: true },
    { id: 'link-in-text-block', enabled: true },
    { id: 'region', enabled: true },
    { id: 'skip-link', enabled: true },
    { id: 'help-same-as-label', enabled: true }
  ]
};
  1. Render the above react-componant via browser (here started the server on http://localhost:8081/) using
if (process.env.NODE_ENV !== 'production') {
  axe(React, ReactDOM, 1000, axeConf);
  const axeResults = {} // get axe-results from somewhere

   axe.logToConsole(axeResults) // logs to the devtools console
}

Output: logToConsole() is logging the axeResults to browser's console(devtools)

image

Environment:

Label Value
Product axe-core-npm/react
Version 4.7.4-62fd241.0
OS-Details _MAC- Intel Core i7 - 11.6.8 & Windows11 _
BrowserDetails Chrome Version 117.0.5938.88 (Official Build) (64-bit) & Firefox 117.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@michael-siek michael-siek

Labels
PRIORITY: high High priority item; should be scheduled in this or next sprint TYPE: qa bug Bug that was found during the QA process
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@michael-siek @padmavemulapati