Major Jest Upgrades

[sghoweri]

Jira

http://vjira2:8080/browse/BDS-1041

Summary

Major upgrades to Jest to support testing web component rendering in a browser and web page instance that's generated automatically, in addition to adding the ability to run visual regression tests on these.

Details

Jest-specific Updates

• Updates global Jest config to automatically skip over *.e2e.js and *.data.js test files
• Added automatic transpiling of ES6 code (via Babel) to allow component tests to use modern JS libraries
• Polyfilled / updated the testing environment in order to use helper libraries for testing web components
• Wired up Jest to automatically boot up webpack dev server to remove the need to compile Pattern Lab before running any Jest tests
  • Added new webpack dev server setup for quickly testing components using JIT (just in time) compiling
• Added basic visual regression testing to Jest via Jest Image Snapshot + added jest-dom as a new tool to help evaluate the state of the DOM inside components being tested
  • Also added simple image screenshot test reporting functionality to Jest to assist with debugging VRT issues until full Github integration is wired up
  • Failed tests automatically get their screenshots uploaded to now.sh from Travis to allow for simple troubleshooting
• Faster Twig Renderer:
  • Update Twig renderer to include external method to stop currently running server
  • Updated Twig renderer calls in button component example to compile even faster

Jest Test-specific Updates

• Renamed the figure component test's external data file to automatically get excluded
• Removed the old button component JS test
• Wired up the existing button component's Jest tests to now include two visual regression tests in addition to to web component test examples
• Moved the image component's test file to the proper folder
• Updated the monorepo Jest test to speed things up by 20 seconds!

How to test

• Review updates to understand the changes this includes -- especially the main jest config file + the button component's test updates!
• Confirm Jest tests running as expected
• Confirm the full build runs and deploys as expected

[danielamorse]

Approved 👍 Love that we can now use ES6 in our test files and that we can exclude supporting files like *.data.js. Good stuff! Ran locally and start/test/build all worked as expected.

One question... I ran npm run test after doing a full clean and setup and the button Jest test took ~30 seconds. Ran it again, took ~15 seconds. Ran it again, took ~8 seconds. How/why does this get faster each time? Is this expected?

[sghoweri]

Approved 👍 Love that we can now use ES6 in our test files and that we can exclude supporting files like *.data.js. Good stuff! Ran locally and start/test/build all worked as expected.

One question... I ran npm run test after doing a full clean and setup and the button Jest test took ~30 seconds. Ran it again, took ~15 seconds. Ran it again, took ~8 seconds. How/why does this get faster each time? Is this expected?

Thanks @danielamorse!

The faster subsequent test runs are probably related to a few different things (all related to caching):

• The Webpack Dev Server instance we spin up (serving from in-memory)
• The Webpack Hard Source Plugin (hard cache of certain Webpack assets)
• The @bolt/twig-renderer trying to stay alive to speed up subsequent Twig requests
• Jest’s own cache to help speed up and/or skip tests without any changes (don’t quote me on this one ☝️)

Also, fwiw, I think there’s still a couple additional optimizations we might be able to try out to speed things up even further — running a test within 30s is just the ballpark max time I’m shooting for with this initial round of updates!

[adamszalapski]

All test are passing. I have the same results as @danielamorse first test take 30s then every next is shorter. My quickest test was 10s. I noticed that bolt-button tests are the longest ones. The test is on the top of the list but is finished as last ones. I think is related to a new testing approach.


Great work, i happy that we can use ES6 in test and i like new approach. Maybe we can move renderTwig and renderTwigString to separate file because i think we will be using this functions in all our tests. One more time great job.

[adamszalapski]

This testFilesToIgnore don't cover figure-data.js this looking files with .data.js and bolt-figure component use figure-data.js. Please correct me if i'm wrong.

[adamszalapski]

Sorry, my bad i saw that you change figure-data.jsto figure.data.js :)

[remydenton]

This is awesome. Bonus points for super clean and readable git commits!

[sghoweri]

Thanks guys!!