Upgrade to Chai v. 5 from Chai v. 4

[alberto56]

To reproduce:

Step 1: Understand what https://github.com/dcycle/docker-browsertesting is meant to do.

git clone https://github.com/dcycle/docker-browsertesting.git
cd docker-browsertesting
docker run --rm -v "$(pwd)"/example01/test:/app/test \
  -v "$(pwd)"/artifacts:/artifacts \
  dcycle/browsertesting:4

Confirm you see:

✔ It should be possible to search for something on Google (4432ms)

1 passing (4s)

This means that we are using our dcycle/browsertesting:4 image to make sure it is possible to seach for something with Google. The actual test is here.

Once you have run your test you can see a screenshot at ./artifacts/a-screenshot.png, which shows what the test robot sees.

Step 2: Checkout the working branch

Make sure to use the working branch and not the master branch.

git checkout working

Step 3: Run ./ci.sh

./ci.sh

Make sure all tests pass; you should see the same thing as our CircleCI build at https://app.circleci.com/pipelines/github/dcycle/docker-browsertesting?branch=working.

Note that there will be an exception thrown during the test. This is normal because we are testing that an exception is thrown when we are expecting one.

Step 4: Use version 5 of chai instead of version 4

In ./docker-resources/build-docker.sh, change this line:

npm install mocha chai@4

for this one:

npm install mocha chai

This has the effect of using version 5 of chai instead of version 4.

Step 5: Run ./ci.sh

./ci.sh

Now, with version 5 of chai, you should see an error:

Exception during run: Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/chai/chai.js from /app/test/test.js not supported.
Instead change the require of chai.js in /app/test/test.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/app/test/test.js:1:20)
    at async formattedImport (/app/node_modules/mocha/lib/nodejs/esm-utils.js:9:14)
    at async exports.requireOrImport (/app/node_modules/mocha/lib/nodejs/esm-utils.js:42:28)
    at async exports.loadFilesAsync (/app/node_modules/mocha/lib/nodejs/esm-utils.js:100:20)
    at async singleRun (/app/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at async exports.handler (/app/node_modules/mocha/lib/cli/run.js:370:5) {
  code: 'ERR_REQUIRE_ESM'

Remaining to do:

This seems to fail based on several instances of const { expect } = require('chai') in the codebase.

Please read chaijs/chai#1561 and understand the change to be made in order for ./ci.sh to pass.

Because several projects use const { expect } = require('chai') as in the example, the pull request should:

• Change the 4 tag to 5 in README.md and ./scripts/rebuild.sh (for example, use dcycle/browsertesting:5 instead of dcycle/browsertesting:4 in README.md, and change:

  MAJORVERSION='4'
  VERSION='4.0'

to

MAJORVERSION='5'
VERSION='5.0'

in ./scripts/rebuild.sh).

• In README, add a section "Migrating from tag 4 to tag 5" which will include text explaining the change in chai 4 to 5, and how a change to scripts is required when moving from dcycle/browsertesting:4 to dcycle/browsertesting:5

Make sure ./ci.sh passes with all these changes. If you do not have write access to the repository, please fork it and submit a pull request.

[suresh-kumara-gist]

`% docker run --rm -v "$(pwd)"/example01/test:/app/test
-v "$(pwd)"/artifacts:/artifacts
dcycle/browsertesting:4
[info] Running all tests with mocha in /app/test/*.js

Puppeteer old Headless deprecation warning:
In the near future headless: true will default to the new Headless mode
for Chrome instead of the old Headless implementation. For more
information, please see https://developer.chrome.com/articles/new-headless/.
Consider opting in early by passing headless: "new" to puppeteer.launch()
If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.

...set viewport
...go to google homepage

1. It should be possible to search for something on Google

0 passing (17s)
1 failing

1. It should be possible to search for something on Google:
   Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/app/test/test.js)
   at listOnTimeout (node:internal/timers:573:17)
   at process.processTimers (node:internal/timers:514:7)

...input "puppeteer"
...about to press enter
...waiting for selector
...taking a screenshot
...saving state of the DOM (source code)
File has been saved.
[info] Move screenshots from /tmp to /artifacts if applicable
[info] No screenshots to move from /tmp to /artifacts
Our output does not contain 'Exception alert'
Will now exit with the Mocha exit code`

[alberto56]

Hmmm, strange, that means your test is taking more than 15 seconds to run. (Timeout of 15000ms exceeded)

docker run --rm -v "$(pwd)"/example01/test:/app/test \
  -v "$(pwd)"/artifacts:/artifacts \
  dcycle/browsertesting:4

Please try again. Also, please try with a VPN and report what you find.

[suresh-kumara-gist]

After trying
% docker run --rm -v "$(pwd)"/example01/test:/app/test
-v "$(pwd)"/artifacts:/artifacts
dcycle/browsertesting:4
`
for many a times it worked.

[suresh-kumara-gist]

chaijs/chai#1561 (comment)