question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setup CI infra to run DevTools tests against multiple React versions

See original GitHub issue

PR #19108 caused some Suspense-related DevTools regressions (more info available on #19368) which we did not catch because of the fact that DevTools tests are only run against the version of React in master.

We should follow the precedent of the regression fixtures tests and have CI run DevTools tests against multiple React versions, including v15, all v16 minors, and the current HEAD of master branch.

Setting this up will involve several things:

  • Infra to checkout older React packages and run tests against them.
  • Some form of gating so that we can account for expected differences in Store snapshots between React versions.
  • Some form of gating so that we can avoid running tests against invalid combinations of features and versions (e.g. don’t test for Suspense in a version of React that didn’t include that component yet).

Which React versions should we test?

In addition to testing against the latest React version in source, I propose that we should also test every minor version going back as far as we support (e.g. starting with v15). We could automate this process like so:

const {exec} = require('child_process');
const semver = require('semver');

const versions = {};

exec('npm view react versions --json', (error, stdout, stderr) => {
  if (stdout) {
    const json = JSON.parse(stdout);
    json.forEach(versionString => {
      if (semver.valid(versionString)) {
        if (semver.gte(versionString, '15.0.0')) {
          const {major, minor, patch} = semver.parse(versionString);

          // Filter out RCs and CI-published daily releases.
          if (`${major}.${minor}.${patch}` === versionString) {
            // Store the last patch for each minor.
            // This relies on the view command returning a sorted releases list.
            const key = `${major}.${minor}`;

            versions[key] = versionString;
          }
        }
      }
    });

    // The "versions" object now contains all versions we should test again.
  }
});

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:40

github_iconTop GitHub Comments

1reaction
bvaughncommented, Aug 19, 2021

This issue is all yours, @Albert-Jokelin! 😄

I’ve added the “good first issue (taken)” label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

1reaction
bvaughncommented, Mar 31, 2021

Okay. Keep me posted when your PR is ready for a look 👍🏼

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Debug React Components Using React Developer ...
This tutorial begins by installing the React Developer Tools browser ... running Node.js; this tutorial was tested on Node.js version ...
Read more >
Behind the Scenes: Improving the Repository Infrastructure
Having to build the project to run a test would have been prohibitively slow. ... React DevTools on a website with development version...
Read more >
How to Test React Applications - freeCodeCamp
And I'm going to be running on Node version 14, you can execute on other node versions if you want, of course, and...
Read more >
Run Nightwatch tests on Gitlab CI | Developer Guide
Setup Guide · Step 1: Setup Gitlab CI Project · Step 2: Update the nightwatch.conf.js file · Step 3 : Update the .gitlab-ci.yml...
Read more >
Firefox DevTools User Docs
The ellipsis menu on the right-hand side of Developer Tools contains several commands that let you perform actions or change tool settings.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found