Jest test fails when including 4x.js library

[adam-delaney]

I am not able to get Jest tests to pass while including the library in my jest config as setupFilesAfterEnv: ['path_to_4x.js'] or setupFiles['path_to_4x.js']. I get the following error:

    TypeError: Cannot read property 'on' of undefined

      1492 |
      1493 |     event: {
    > 1494 |       on: window.bean.on,
           |                       ^
      1495 |       add: window.bean.add,
      1496 |       one: window.bean.one,
      1497 |       off: window.bean.off,

      at path_to_4x/4X.Max.js:1494:23

[accdc]

Thanks, that is odd. I've never used Jest before, so I'll need to do some reading on it.

4X has several internal dependencies that are preloaded before the primary API, Bean is for handling internal events, plus the Promise and Fetch API polyfills for cross browser support. These tie into the current window when processed.

What happens if you change the following in the 4X.Max.js file then run the same test?

on: window.bean.on,

To this instead:

on: bean.on,

Does the same error occur?

[adam-delaney]

I'm still getting an undefined:

ReferenceError: bean is not defined

[accdc]

Thanks, I just pushed a new version of 4X, which uses an internal object reference instead. That should hopefully fix your issue. Please let me know if that does the trick. The new version name is Broken Angels.

[adam-delaney]

Thanks for looking into this. I'm still seeing errors. This is the output now:

  ● Test suite failed to run

    TypeError: $A.event.on is not a function

      1318 |       _parseURLWithSelector: function(u) {
      1319 |         var ss = u.split(/\s+/);
    > 1320 |         return {
           |                           ^
      1321 |           url: ss[0],
      1322 |           selector: u.substring(ss[0].length)
      1323 |         };

      at String.<anonymous> (path_to_js/4X/4X.Max.js:1320:30)
      at Function.loop (path_to_js/4X/4X.Max.js:703:16)
      at Function.<anonymous> (path_to_js/4X/4X.Max.js:1313:20)
      at Function.loop (path_to_js/4X/4X.Max.js:707:16)
      at Document.<anonymous> (path_to_js/4X/4X.Max.js:1310:16)
      at Function.loop (path_to_js/4X/4X.Max.js:703:16)
      at Function.on (path_to_js/4X/4X.Max.js:1307:12)
      at path_to_js/4X/4X.Max.js:4465:8
      at path_to_js/4X/4X.Max.js:4515:5
      at Object.<anonymous> (path_to_js/4X/4X.Max.js:6178:3)

Note I'm using this method to include the script in the Jest test: https://stackoverflow.com/questions/40382161/how-to-inject-external-js-from-cdn-to-jest-unit-testing.

[accdc]

That is so weird. I know the events are working, otherwise nothing would work.

I don't know how to duplicate what you are seeing for testing on my end.

Would it be possible for you to upload a copy of your repo that includes the Jest config and tests so I can run it on my end? Probably best from your account as your own repo, either public or private as you wish.

I'll need some help in getting it started since I've never used Jest before.

Please feel free to send me an email if that is easier to collaborate. bryan.garaventa @ whatsock . com

[adam-delaney]

Bryan, I've sent an email with an example of what I'm encountering. I've included the sample test below as well.

[adam-delaney]

test.zip

[adam-delaney]

Here is an example of a simple test failure I’m seeing. If you run npm install and then npm run test from the test project root I’m seeing the following error: TypeError: Cannot read property 'on' of undefined

  1225 |                           rs = $A.create("style", {
  1226 |                             type: "text/css",
> 1227 |                             id: $A.genId()
       |                       ^
  1228 |                           });
  1229 |                           rs.innerHTML = content;
  1230 |                           if (!nC) $A._cssCache[u] = rs;

  at test/4X/4X.Max.js:1227:23
  at Object.<anonymous> (test/4X/4X.Max.js:4494:3)
  at async TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
  at async runJest (node_modules/@jest/core/build/runJest.js:387:19)
  at async _run10000 (node_modules/@jest/core/build/cli/index.js:408:7)
  at async runCLI (node_modules/@jest/core/build/cli/index.js:261:3)

[accdc]

Thanks, I'll give this a swing in the next couple of days and hopefully get things sorted out sooner than later. :)

[accdc]

Hi, I'm totally stumped. I was able to produce the error using the Broken Angels version of 4X, which you would need to switch out for the one in the sample zip which is using Mona Lisa Overdrive.

It looks like the code that Jest is choking on is contained within a promise callback, which is confusing because the code block that is referenced does not actually include any object.on declarations even though that is what the error states in the Jest console.

In researching this, I found the following 2 resources that may help figure out how to load tests that will handle the Fetch API callbacks correctly, which will likely be needed.

https://www.w3resource.com/jest/testing-asynchronous-code.php

https://www.pluralsight.com/guides/test-asynchronous-code-jest

I will need your help to confirm this though, plus anyone else who knows how Jest works to figure this one out. Hopefully there is somebody out there who can help me debug this oddity.

[adam-delaney]

@accdc, thanks for looking into this. I can't guarantee that I'll have a lot of time to investigate, but I will not these resources and can also ask around to the team.

[accdc]

No problem, I'll keep poking at it too as time allows and hopefully something will make sense at some point. I expect those familiare with Jest will have better insights hopefully as to the nature of the issue. Please let me know if you discover anything on your end.

[accdc]

Hi, Closing this issue since it was fixed with the addition of the standard loading script files within the root repo folder "4X/Standard", which includes a ReadMe file that describes how to implement it.