chore: 🆙 upgrade react 17 (#27268)

#26136
This commit is contained in:
Tom Xu 2020-12-01 18:28:35 +08:00 committed by GitHub
parent 4fad2ef958
commit 32a9ba52b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 249 additions and 202 deletions

View File

@ -1,5 +1,7 @@
name: CI
name: lighthouse ci
on: [push]
jobs:
lighthouseci:
runs-on: ubuntu-latest

View File

@ -1,6 +1,6 @@
name: test
name: test
on: [push, pull_request]
on: push
jobs:
setup:
@ -18,7 +18,7 @@ jobs:
- name: create package-lock.json
run: npm i --package-lock-only
- name: hack for singe file
- name: hack for single file
run: |
if [ ! -d "package-temp-dir" ]; then
mkdir package-temp-dir
@ -73,7 +73,163 @@ jobs:
run: node ./tests/dekko/lib.test.js
needs: setup
dist:
lint:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: lint
run: npm run lint
needs: setup
check_metadata:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: check demo
run: node ./scripts/check-demo.js
needs: setup
react-17-dom:
name: react@17.x / dom
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: test
run: npm test -- -w 1 --coverage
- name: coverage
run: bash <(curl -s https://codecov.io/bash)
needs: setup
react-17-node:
name: react@17.x / node
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: test
run: npm run test-node
needs: setup
react-17-lib:
name: react@17.x / lib
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: restore cache from lib
uses: actions/cache@v2
with:
path: lib
key: lib-${{ github.sha }}
- name: test
run: npm test
env:
LIB_DIR: lib
needs: compile
react-17-es:
name: react@17.x / es
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: restore cache from es
uses: actions/cache@v2
with:
path: es
key: es-${{ github.sha }}
- name: test
run: npm test
env:
LIB_DIR: es
needs: compile
react-17-dist:
name: react@17.x / dist
runs-on: ubuntu-latest
steps:
- name: checkout
@ -108,8 +264,11 @@ jobs:
LIB_DIR: dist
needs: setup
lint:
react-16-dom:
name: react@16.x / dom
runs-on: ubuntu-latest
env:
REACT: 16
steps:
- name: checkout
uses: actions/checkout@master
@ -126,37 +285,18 @@ jobs:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: lint
run: npm run lint
needs: setup
dom:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: install react 16
run: npm run install-react-16
- name: test
run: npm test -- -w 1 --coverage
- name: coverage
run: bash <(curl -s https://codecov.io/bash)
needs: setup
node:
react-16-node:
name: react@16.x / node
runs-on: ubuntu-latest
env:
REACT: 16
steps:
- name: checkout
uses: actions/checkout@master
@ -173,34 +313,18 @@ jobs:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: install react 16
run: npm run install-react-16
- name: test
run: npm run test-node
needs: setup
check_metadata:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: check demo
run: node ./scripts/check-demo.js
needs: setup
lib:
react-16-lib:
name: react@16.x / lib
runs-on: ubuntu-latest
env:
REACT: 16
steps:
- name: checkout
uses: actions/checkout@master
@ -223,14 +347,20 @@ jobs:
path: lib
key: lib-${{ github.sha }}
- name: install react 16
run: npm run install-react-16
- name: test
run: npm test
env:
LIB_DIR: lib
needs: compile
es:
react-16-es:
name: react@16.x / es
runs-on: ubuntu-latest
env:
REACT: 16
steps:
- name: checkout
uses: actions/checkout@master
@ -253,8 +383,49 @@ jobs:
path: es
key: es-${{ github.sha }}
- name: install react 16
run: npm run install-react-16
- name: test
run: npm test
env:
LIB_DIR: es
needs: compile
react-16-dist:
name: react@16.x / dist
runs-on: ubuntu-latest
env:
REACT: 16
steps:
- name: checkout
uses: actions/checkout@master
- name: restore cache from package-lock.json
uses: actions/cache@v2
with:
path: package-temp-dir
key: lock-${{ github.sha }}
- name: restore cache from node_modules
uses: actions/cache@v2
with:
path: node_modules
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
- name: install react 16
run: npm run install-react-16
- name: dist
run: npm run dist
env:
NODE_OPTIONS: --max_old_space_size=4096
- name: check
run: node ./tests/dekko/dist.test.js
- name: test
run: npm test
env:
LIB_DIR: dist
needs: setup

View File

@ -1,23 +0,0 @@
sudo: false
language: node_js
node_js:
- 11
cache:
directories:
- $HOME/.npm
matrix:
fast_finish: true
include:
- env: TEST_TYPE=lint
- env: TEST_TYPE=test:dist
- env: TEST_TYPE=test:lib
- env: TEST_TYPE=test:es
- env: TEST_TYPE=test:dom
- env: TEST_TYPE=test:node
script:
- scripts/travis-script.sh

View File

@ -1,32 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Alert ErrorBoundary 1`] = `
<div
class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
>
<div
class="ant-alert-content"
>
<div
class="ant-alert-message"
>
ReferenceError: NotExisted is not defined
</div>
<div
class="ant-alert-description"
>
<pre>
in ThrowError
in ErrorBoundary (created by WrapperComponent)
in WrapperComponent
</pre>
</div>
</div>
</div>
`;
exports[`Alert action of Alert custom action 1`] = `
<div
class="ant-alert ant-alert-success"

View File

@ -75,8 +75,7 @@ describe('Alert', () => {
});
});
const testIt = process.env.REACT === '15' ? it.skip : it;
testIt('ErrorBoundary', () => {
it('ErrorBoundary', () => {
// @ts-expect-error
// eslint-disable-next-line react/jsx-no-undef
const ThrowError = () => <NotExisted />;
@ -86,7 +85,7 @@ describe('Alert', () => {
</ErrorBoundary>,
);
// eslint-disable-next-line jest/no-standalone-expect
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
});
it('could be used with Tooltip', async () => {

View File

@ -13,10 +13,6 @@ describe('ConfigProvider.Locale', () => {
}
it('not throw', () => {
if (process.env.REACT === '15') {
return;
}
mount(
<ConfigProvider locale={{}}>
<span />

View File

@ -1,5 +1,6 @@
import React from 'react';
import { render, mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { Col, Row } from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
@ -75,10 +76,12 @@ describe('Grid', () => {
expect(wrapper).toMatchSnapshot();
});
it('when component has been unmounted, componentWillUnmount should be called', () => {
it('ResponsiveObserve.unsubscribe should be called when unmounted', () => {
const Unmount = jest.spyOn(ResponsiveObserve, 'unsubscribe');
const wrapper = mount(<Row gutter={{ xs: 20 }} />);
act(() => {
wrapper.unmount();
});
expect(Unmount).toHaveBeenCalled();
});

View File

@ -15,24 +15,3 @@ exports[`Switch rtl render component should be rendered correctly in RTL directi
/>
</button>
`;
exports[`Switch should has click wave effect 1`] = `
<button
ant-click-animating="true"
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
/>
<div
class="ant-click-animating-node"
style="border-color: buttonface;"
/>
</button>
`;

View File

@ -15,7 +15,7 @@ describe('Switch', () => {
const wrapper = mount(<Switch />);
wrapper.find('.ant-switch').getDOMNode().click();
await new Promise(resolve => setTimeout(resolve, 0));
expect(wrapper.render()).toMatchSnapshot();
expect(wrapper.find('button').getDOMNode().getAttribute('ant-click-animating')).toBe('true');
});
it('warning if set `value`', () => {

View File

@ -83,7 +83,6 @@
"sort": "npx sort-package-json",
"sort-api": "antd-tools run sort-api-table",
"start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
"start:preact": "antd-tools run clean && cross-env NODE_ENV=development REACT_ENV=preact concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
"test": "jest --config .jest.js --cache=false",
"test:update": "jest --config .jest.js --cache=false -u",
"test-all": "sh -e ./scripts/test-all.sh",
@ -92,6 +91,7 @@
"site:test": "jest --config .jest.site.js --cache=false --force-exit",
"test-image": "npm run compile:less && docker-compose run tests",
"version": "node ./scripts/generate-version",
"install-react-16": "npm i --no-save react@16 react-dom@16 react-test-renderer@16 enzyme-adapter-react-16",
"argos": "argos upload imageSnapshots"
},
"husky": {
@ -164,13 +164,14 @@
"@types/jest-image-snapshot": "^4.1.0",
"@types/lodash": "^4.14.139",
"@types/puppeteer": "^5.4.0",
"@types/react": "^16.9.21",
"@types/react": "^17.0.0",
"@types/react-color": "^3.0.1",
"@types/react-copy-to-clipboard": "^4.3.0",
"@types/react-dom": "^16.9.5",
"@types/react-dom": "^17.0.0",
"@types/warning": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
"antd-img-crop": "^3.1.1",
"antd-pro-merge-less": "^3.0.11",
"antd-theme-generator": "^1.2.3",
@ -178,9 +179,9 @@
"array-move": "^3.0.0",
"babel-eslint": "^10.0.1",
"babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^1.5.3",
"bisheng": "^2.0.0",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.1.0",
"bisheng-plugin-react": "^1.1.2",
"bisheng-plugin-toc": "^0.4.4",
"bundlesize": "^0.18.0",
"chalk": "^4.0.0",
@ -193,7 +194,6 @@
"docsearch.js": "^2.6.3",
"enquire-js": "^0.2.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.6.0",
"esbuild-webpack-plugin": "^1.0.0",
"eslint": "^7.9.0",
@ -232,8 +232,6 @@
"mockdate": "^3.0.0",
"node-fetch": "^2.6.0",
"open": "^7.0.3",
"preact": "^10.0.0",
"preact-compat": "^3.18.5",
"prettier": "^2.2.0",
"pretty-quick": "^3.0.0",
"querystring": "^0.2.0",
@ -243,12 +241,12 @@
"rc-trigger": "^5.1.2",
"rc-tween-one": "^2.4.1",
"rc-virtual-list": "^3.0.3",
"react": "^16.9.0",
"react": "^17.0.1",
"react-color": "^2.17.3",
"react-copy-to-clipboard": "^5.0.1",
"react-dnd": "^11.1.1",
"react-dnd-html5-backend": "^11.1.1",
"react-dom": "^16.9.0",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
"react-github-button": "^0.1.11",
"react-helmet-async": "^1.0.4",
@ -259,7 +257,7 @@
"react-router-dom": "^5.0.1",
"react-sortable-hoc": "^1.11.0",
"react-sticky": "^6.0.3",
"react-test-renderer": "^16.8.6",
"react-test-renderer": "^17.0.1",
"react-text-loop": "^2.3.0",
"react-virtualized": "^9.22.0",
"react-window": "^1.8.5",

View File

@ -1,42 +0,0 @@
#!/bin/bash
set -x
set -e
run_test() {
if [ "$REACT" != 16 ]; then
npm test -- -w 2 -u $*
else
npm test -- -w 2 $*
fi
}
run_test_node() {
if [ "$REACT" != 16 ]; then
npm run test-node -- -w 2 -u
else
npm run test-node -- -w 2
fi
}
if [ "$TEST_TYPE" = lint ]; then
npm run lint
elif [ "$TEST_TYPE" = test:dist ]; then
npm run dist
node ./tests/dekko/dist.test.js
LIB_DIR=dist run_test
elif [ "$TEST_TYPE" = test:lib ]; then
npm run compile
node ./tests/dekko/lib.test.js
LIB_DIR=lib run_test
elif [ "$TEST_TYPE" = test:es ]; then
npm run compile
LIB_DIR=es run_test
elif [ "$TEST_TYPE" = test:dom ]; then
run_test --coverage
if [ "$REACT" = 16 ]; then
bash <(curl -s https://codecov.io/bash)
fi
elif [ "$TEST_TYPE" = test:node ]; then
run_test_node
fi

View File

@ -9,7 +9,6 @@ const themeConfig = require('./themeConfig');
const { webpack } = getWebpackConfig;
const isDev = process.env.NODE_ENV === 'development';
const usePreact = process.env.REACT_ENV === 'preact';
function alertBabelConfig(rules) {
rules.forEach(rule => {
@ -72,16 +71,6 @@ module.exports = {
'react-router-dom': 'ReactRouterDOM',
};
if (usePreact) {
config.resolve.alias = {
...config.resolve.alias,
react: 'preact-compat',
'react-dom': 'preact-compat',
'create-react-class': 'preact-compat/lib/create-react-class',
'react-router': 'react-router',
};
}
if (isDev) {
config.devtool = 'source-map';
@ -124,6 +113,5 @@ module.exports = {
htmlTemplateExtraData: {
isDev,
usePreact,
},
};

View File

@ -31,7 +31,10 @@ if (typeof window !== 'undefined') {
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const Adapter =
process.env.REACT === '16'
? require('enzyme-adapter-react-16') // eslint-disable-line import/no-extraneous-dependencies,import/no-unresolved
: require('@wojtekmaj/enzyme-adapter-react-17');
Enzyme.configure({ adapter: new Adapter() });