Setup CI infra to run DevTools tests against multiple React versions
See original GitHub issuePR #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:
- Created 3 years ago
- Comments:40
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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!
Okay. Keep me posted when your PR is ready for a look 👍🏼