Optional chaining rewriting by Hammerhead causes TypeError: undefined has no properties

thomas-jakemeyn commented 2 months ago

What is your Scenario?

My application uses @reduxjs/toolkit that contains the following function (see here):

function buildCreateSlice({ creators } = {}) {
    const cAT = creators?.asyncThunk?.[asyncThunkSymbol];
    ...
}

What is the Current behavior?

The functionality that I am testing works well in Firefox. However, when I run the TestCafe test, it fails with a TypeError: undefined has no properties. This is caused by the transformation that is applied by Hammerhead.

The code is transformed from this:

function buildCreateSlice({ creators } = {}) {
    const cAT = creators?.asyncThunk?.[asyncThunkSymbol];
    ...
}

into this, which throws a TypeError when creators?.asyncThunk is undefined:

__get$ = function(o,p){return o[p]}

function buildCreateSlice( _hh$temp418  = {}) {
    var creators = _hh$temp418.creators;
    const cAT = __get$(creators?.asyncThunk, asyncThunkSymbol, true);
    ...
}

What is the Expected behavior?

The behaviour of creators?.asyncThunk?.[asyncThunkSymbol] should be preserved after the transformation.

What is your public website URL? (or attach your complete example)

NA

What is your TestCafe test code?

NA

Your complete configuration file

No response

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

NA

TestCafe version

3.6.2

Node.js version

No response

Command-line arguments

testcafe firefox -e

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

github-actions[bot] commented 1 month ago

Thank you for submitting a bug report. We would love to help you investigate the issue. Please share a simple code example that reliably reproduces the bug. For more information, read the following article: How To Create a Minimal Working Example When You Submit an Issue. We look forward to your response.

thomas-jakemeyn commented 1 month ago

The test below passes in Chrome but fails in Firefox with a TypeError.

index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>TestCafe</title>
</head>
<body>
  <script>
    const worker = new Worker('worker.js');
    worker.onmessage = e => {
      console.log(e.data);
    };
  </script>
</body>
</html>

worker.js

const asyncThunkSymbol = 'asyncThunkSymbol';

function buildCreateSlice({ creators } = {}) {
  return creators?.asyncThunk?.[asyncThunkSymbol];
}

try {
  const shouldBeUndefined = buildCreateSlice();
  postMessage(`OK: ${shouldBeUndefined}`);
} catch (error) {
  postMessage(error);
}

index.spec.js

const express = require('express');

const PORT = 3000;
let server;

fixture`Fixture`
  .page(`http://localhost:${PORT}/index.html`)
  .before(() => {
    const app = express();
    app.use(express.static(__dirname));
    server = app.listen(PORT);
  })
  .after(() => {
    server.close();
  });

test('test', async t => {
  await t.wait(1000);
  const { log } = await t.getBrowserConsoleMessages();
  console.log('worker logs: ', log);
  await t.expect(log[0]).match(/^OK:/);
});

thomas-jakemeyn commented 1 month ago

Hello @Bayheck,

Any progress on this issue?

thomas-jakemeyn commented 2 weeks ago

Hello @Bayheck,

Any chance this bug gets fixed in a near future?

github-actions[bot] commented 1 week ago

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.

DevExpress / testcafe-hammerhead