Skip to content

Commit bcf2871

Browse files
eps1loneps1lon
authored
[test] Setup infra for tests in TypeScript (mui#22195)
1 parent b1b0c62 commit bcf2871

File tree

24 files changed

+75
-65
lines changed

24 files changed

+75
-65
lines changed

‎.mocharc.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
module.exports = {
2+
extension: ['js', 'ts', 'tsx'],
23
recursive: true,
34
reporter: 'dot',
4-
require: [
5-
require.resolve('./test/utils/setupBabel'),
6-
require.resolve('./test/utils/setupJSDOM'),
7-
],
5+
require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
86
};

‎docs/next.config.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@ const workspaceRoot = path.join(__dirname, '../');
1010
/**
1111
* https://github.com/zeit/next.js/blob/287961ed9142a53f8e9a23bafb2f31257339ea98/packages/next/next-server/server/config.ts#L10
1212
* @typedef {'legacy' | 'blocking' | 'concurrent'} ReactRenderMode
13-
* legacy - ReactDOM.render(<App />)
14-
* legacy-strict - ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, Element)
15-
* blocking - ReactDOM.createSyncRoot(Element).render(<App />)
16-
* concurrent - ReactDOM.createRoot(Element).render(<App />)
13+
*
14+
* Values explained:
15+
* - legacy - `ReactDOM.render(<App />)`
16+
* - legacy-strict - `ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, Element)`
17+
* - blocking - `ReactDOM.createSyncRoot(Element).render(<App />)`
18+
* - concurrent - `ReactDOM.createRoot(Element).render(<App />)`
19+
*
1720
* @type {ReactRenderMode | 'legacy-strict'}
1821
*/
1922
const reactMode = 'legacy';

‎docs/src/modules/utils/parseTest.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as babel from '@babel/core';
2-
import { readFile } from 'fs-extra';
2+
import { readFile, existsSync } from 'fs-extra';
33
import * as path from 'path';
44

55
const workspaceRoot = path.join(__dirname, '../../../../');
@@ -96,7 +96,13 @@ function getInheritComponentName(valueNode) {
9696
* @property {string | undefined} inheritComponent
9797
*/
9898
export default async function parseTest(componentFilename) {
99-
const testFilename = withExtension(componentFilename, '.test.js');
99+
const testFilename = ['js', 'ts', 'tsx']
100+
.map((extension) => {
101+
return withExtension(componentFilename, `.test.${extension}`);
102+
})
103+
.find((possibleTestFileName) => {
104+
return existsSync(possibleTestFileName);
105+
});
100106
const babelParseResult = await parseWithConfig(testFilename, babelConfigPath);
101107
const descriptor = findConformanceDescriptor(babelParseResult);
102108

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@
3333
"size:why": "size-limit --why packages/material-ui/build/index.js",
3434
"start": "yarn docs:dev",
3535
"test": "yarn lint && yarn typescript && yarn test:coverage",
36-
"test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.js' 'docs/**/*.test.js' 'scripts/**/*.test.js' 'test/utils/**/*.test.js' --exclude '**/node_modules/**' && nyc report --reporter=lcovonly",
37-
"test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.js' 'docs/**/*.test.js' 'scripts/**/*.test.js' 'test/utils/**/*.test.js' --exclude '**/node_modules/**' && nyc report --reporter=html",
36+
"test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**' && nyc report --reporter=lcovonly",
37+
"test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**' && nyc report --reporter=html",
3838
"test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
3939
"test:regressions": "yarn test:regressions:build && rimraf test/regressions/screenshots/chrome/* && vrtest run --config test/vrtest.config.js --record",
4040
"test:regressions:build": "webpack --config test/regressions/webpack.config.js",
4141
"test:umd": "node packages/material-ui/test/umd/run.js",
42-
"test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.js' 'docs/**/*.test.js' 'scripts/**/*.test.js' 'test/utils/**/*.test.js' --exclude '**/node_modules/**'",
42+
"test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
4343
"test:watch": "yarn test:unit --watch",
4444
"typescript": "lerna run typescript --parallel"
4545
},
@@ -179,7 +179,7 @@
179179
"packages/material-ui-styles/src/**/*.js"
180180
],
181181
"exclude": [
182-
"**/*.test.js"
182+
"**/*.test.{js,ts,tsx}"
183183
],
184184
"sourceMap": false,
185185
"instrument": false

‎packages/material-ui-icons/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"release": "yarn build && npm publish build --tag next",
3434
"src:download": "cd ../../ && babel-node --config-file ./babel.config.js packages/material-ui-icons/scripts/download.js",
3535
"src:icons": "cd ../../ && UV_THREADPOOL_SIZE=64 babel-node --config-file ./babel.config.js packages/material-ui-icons/builder.js --output-dir packages/material-ui-icons/src --svg-dir packages/material-ui-icons/material-icons --renameFilter ./renameFilters/material-design-icons.js",
36-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-icons/**/*.test.js' --exclude '**/node_modules/**'",
36+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-icons/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
3737
"test:built-typings": "tslint -p test/generated-types/tsconfig.json \"test/generated-types/*.{ts,tsx}\"",
3838
"typescript": "tslint -p tsconfig.json \"src/**/*.{ts,tsx}\""
3939
},

‎packages/material-ui-lab/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"build:copy-files": "node ../../scripts/copy-files.js",
3131
"prebuild": "rimraf build",
3232
"release": "yarn build && npm publish build --tag next",
33-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-lab/**/*.test.js' --exclude '**/node_modules/**'",
34-
"typescript": "tslint -p tsconfig.json \"src/**/*.{ts,tsx}\" && tsc -p tsconfig.test.json"
33+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-lab/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
34+
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
3535
},
3636
"peerDependencies": {
3737
"@material-ui/core": "^5.0.0-alpha.6",

‎packages/material-ui-lab/src/TabPanel/TabPanel.test.js renamed to ‎packages/material-ui-lab/src/TabPanel/TabPanel.test.tsx

+2-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// @ts-check
21
import * as React from 'react';
32
import { expect } from 'chai';
43
import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
@@ -7,10 +6,7 @@ import TabContext from '../TabContext';
76

87
describe('<TabPanel />', () => {
98
const mount = createMount();
10-
/**
11-
* @type {Record<string, string>}
12-
*/
13-
let classes;
9+
let classes: Record<string, string>;
1410
const render = createClientRender();
1511

1612
before(() => {
@@ -20,11 +16,7 @@ describe('<TabPanel />', () => {
2016
describeConformance(<TabPanel value="0" />, () => ({
2117
classes,
2218
inheritComponent: 'div',
23-
mount:
24-
/**
25-
* @param {HTMLElement} element
26-
*/
27-
(element) => mount(<TabContext value="0">{element}</TabContext>),
19+
mount: (node) => mount(<TabContext value="0">{node}</TabContext>),
2820
refInstanceof: window.HTMLDivElement,
2921
skip: ['componentProp', 'reactTestRenderer'],
3022
}));

‎packages/material-ui-lab/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"extends": "../../tsconfig"
2+
"extends": "../../tsconfig",
3+
"include": ["src/**/*", "test/**/*"]
34
}

‎packages/material-ui-lab/tsconfig.test.json

-7
This file was deleted.

‎packages/material-ui-styles/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"build:copy-files": "node ../../scripts/copy-files.js",
3535
"prebuild": "rimraf build",
3636
"release": "yarn build && npm publish build --tag next",
37-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.js' --exclude '**/node_modules/**'",
38-
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{ts,tsx}\""
37+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
38+
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
3939
},
4040
"peerDependencies": {
4141
"@types/react": "^16.8.6",

‎packages/material-ui-styles/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"extends": "../../tsconfig"
2+
"extends": "../../tsconfig",
3+
"include": ["src/**/*", "test/**/*"]
34
}

‎packages/material-ui-system/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"build:copy-files": "node ../../scripts/copy-files.js",
3535
"prebuild": "rimraf build",
3636
"release": "yarn build && npm publish build --tag next",
37-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-system/**/*.test.js' --exclude '**/node_modules/**'",
38-
"typescript": "tslint -p tsconfig.json \"src/**/*.{ts,tsx}\""
37+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-system/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
38+
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
3939
},
4040
"peerDependencies": {
4141
"@types/react": "^16.8.6",

‎packages/material-ui-system/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"extends": "../../tsconfig"
2+
"extends": "../../tsconfig",
3+
"include": ["src/**/*"]
34
}

‎packages/material-ui-utils/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"build:copy-files": "node ../../scripts/copy-files.js",
3131
"prebuild": "rimraf build",
3232
"release": "yarn build && npm publish build --tag next",
33-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-utils/**/*.test.js' --exclude '**/node_modules/**'"
33+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-utils/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'"
3434
},
3535
"peerDependencies": {
3636
"react": "^16.8.0",

‎packages/material-ui/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true yarn build:esm",
3636
"prebuild": "rimraf build",
3737
"release": "yarn build && npm publish build --tag next",
38-
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui/**/*.test.js' --exclude '**/node_modules/**'",
39-
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.test.json && tsc -p tsconfig.build.json"
38+
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
39+
"typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json && tsc -p tsconfig.build.json"
4040
},
4141
"peerDependencies": {
4242
"@types/react": "^16.8.6",

‎packages/material-ui/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"extends": "../../tsconfig"
2+
"extends": "../../tsconfig",
3+
"include": ["src/**/*", "test/**/*"]
34
}

‎packages/material-ui/tsconfig.test.json

-7
This file was deleted.

‎scripts/build.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,20 @@ async function run(argv) {
4444
'--config-file',
4545
babelConfigPath,
4646
'--extensions',
47-
'".js,.ts"',
47+
'".js,.ts,.tsx"',
4848
srcDir,
4949
'--out-dir',
5050
outDir,
5151
'--ignore',
52-
'"**/*.test.js","**/*.spec.ts","**/*.d.ts"',
52+
// Need to put these patterns in quotes otherwise they might be evaluated by the used terminal.
53+
`"${[
54+
'**/*.test.js',
55+
'**/*.test.ts',
56+
'**/*.test.tsx',
57+
'**/*.spec.ts',
58+
'**/*.spec.tsx',
59+
'**/*.d.ts',
60+
].join('","')}"`,
5361
].join(' ');
5462

5563
if (verbose) {

‎test/karma.conf.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ module.exports = function setKarmaConfig(config) {
5555
module: {
5656
rules: [
5757
{
58-
test: /\.(js|ts)$/,
58+
test: /\.(js|ts|tsx)$/,
5959
loader: 'babel-loader',
6060
exclude: /node_modules/,
6161
},
@@ -80,7 +80,7 @@ module.exports = function setKarmaConfig(config) {
8080
'@testing-library/react/pure':
8181
'@testing-library/react/dist/@testing-library/react.pure.esm',
8282
},
83-
extensions: ['.js', '.ts'],
83+
extensions: ['.js', '.ts', '.tsx'],
8484
},
8585
},
8686
webpackMiddleware: {

‎test/karma.tests.js

+11-3
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,20 @@ import './utils/init';
55
const integrationContext = require.context(
66
'../packages/material-ui/test/integration',
77
true,
8-
/\.test\.js$/,
8+
/\.test\.(js|ts|tsx)$/,
99
);
1010
integrationContext.keys().forEach(integrationContext);
1111

12-
const coreUnitContext = require.context('../packages/material-ui/src/', true, /\.test\.js$/);
12+
const coreUnitContext = require.context(
13+
'../packages/material-ui/src/',
14+
true,
15+
/\.test\.(js|ts|tsx)$/,
16+
);
1317
coreUnitContext.keys().forEach(coreUnitContext);
1418

15-
const labUnitContext = require.context('../packages/material-ui-lab/src/', true, /\.test\.js$/);
19+
const labUnitContext = require.context(
20+
'../packages/material-ui-lab/src/',
21+
true,
22+
/\.test\.(js|ts|tsx)$/,
23+
);
1624
labUnitContext.keys().forEach(labUnitContext);

‎test/regressions/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import webfontloader from 'webfontloader';
55
import TestViewer from './TestViewer';
66

77
// Get all the tests specifically written for preventing regressions.
8-
const requireRegression = require.context('./tests', true, /js$/);
8+
const requireRegression = require.context('./tests', true, /(js|ts|tsx)$/);
99
const regressions = requireRegression.keys().reduce((res, path) => {
10-
const [suite, name] = path.replace('./', '').replace('.js', '').split('/');
10+
const [suite, name] = path
11+
.replace('./', '')
12+
.replace(/\.\w+$/, '')
13+
.split('/');
1114
res.push({
1215
path,
1316
suite: `regression-${suite}`,

‎test/utils/describeConformance.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const fullSuite = {
196196
* @typedef {Object} ConformanceOptions
197197
* @property {Record<string, string>} classes - `classes` of the component provided by `@material-ui/styles`
198198
* @property {import('react').ElementType} inheritComponent - The element type that receives spread props.
199-
* @property {function} mount - Should be a return value from createMount
199+
* @property {(node: React.ReactNode) => void} mount - Should be a return value from createMount
200200
* @property {Array<keyof typeof fullSuite>} [only] - If specified only run the tests listed
201201
* @property {any} refInstanceof - `ref` will be an instanceof this constructor.
202202
* @property {Array<keyof typeof fullSuite>} [skip] - Skip the specified tests

‎test/utils/setupBabel.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
require('@babel/register')({
2-
extensions: ['.js', '.ts'],
2+
extensions: ['.js', '.ts', '.tsx'],
33
});

‎tsconfig.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
"@material-ui/types": ["./packages/material-ui-types"],
2626
"test/*": ["./test/*"],
2727
"typescript-to-proptypes": ["./packages/typescript-to-proptypes/src"]
28-
}
28+
},
29+
// Otherwise we get react-native typings which conflict with dom.lib.
30+
"types": ["react"]
2931
},
30-
"exclude": ["**/build/"]
32+
"exclude": ["**/build", "**/node_modules", "docs/.next", "docs/export"]
3133
}

0 commit comments

Comments
 (0)