Skip to content

Commit 7b1a32b

Browse files
TimerTimer
authored
Polish webpack message output (#5174)
* Only install react-scripts in CI mode * Link locally * Re-enable all output tests * 💄 Polish webpack output * Test sass support message * Add more tests, but disabled * Format missing default export error * Format aliased import * Why was node-sass required? Odd * Format webpack rejection error * Re-enable unknown package test * Format file not found error and catch module scope plugin error * Re-disable case sensitive paths * Intercept and format case sensitive path errors * Test out of scope message formatting * Run behavior on macOS * Run behavior on Node 8 and 10, only Node 8 for macOS * Add some debugging * Update matcher * Only check stderr * Remove old snapshot * More debug * Remove debug * Add new debug * Disable test on linux * Add comment for future
1 parent 5abff64 commit 7b1a32b

27 files changed

+558
-178
lines changed

‎.travis.yml

+3
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,8 @@ env:
2828
- TEST_SUITE=behavior
2929
matrix:
3030
include:
31+
- os: osx
32+
node_js: 8
33+
env: TEST_SUITE=behavior
3134
- node_js: 4
3235
env: TEST_SUITE=old-node

‎fixtures/output/webpack-message-formatting/__snapshots__/index.test.js.snap

+89-14
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`webpack message formatting formats aliased unknown export 1`] = `
4+
Object {
5+
"stderr": "Creating an optimized production build...
6+
Failed to compile.
7+
8+
./src/App.js
9+
Attempted import error: 'bar' is not exported from './AppUnknownExport' (imported as 'bar2').
10+
11+
12+
",
13+
"stdout": "",
14+
}
15+
`;
16+
317
exports[`webpack message formatting formats babel syntax error 1`] = `
418
Object {
519
"stderr": "Creating an optimized production build...
620
Failed to compile.
721
822
./src/App.js
9-
Syntax error: Unterminated JSX contents (8:12)
23+
Syntax error: Unterminated JSX contents (8:13)
1024
1125
6 | <div>
1226
7 | <span>
@@ -25,16 +39,16 @@ Syntax error: Unterminated JSX contents (8:12)
2539
exports[`webpack message formatting formats css syntax error 1`] = `
2640
Object {
2741
"stderr": "Creating an optimized production build...
28-
Failed to compile.
29-

30-
./src/AppCss.css
31-
Syntax Error: (3:2) Unexpected }
42+
Failed to compile.
3243
33-
 1 | .App {
34-
 2 |  color: red;
35-
> 3 | }}
36-
 |  ^
37-
 4 | 
44+
./src/AppCss.css
45+
Syntax error: Unexpected } (3:2)
46+
47+
1 | .App {
48+
2 | color: red;
49+
> 3 | }}
50+
| ^
51+
4 |
3852
3953
4054
",
@@ -74,12 +88,58 @@ To ignore, add // eslint-disable-next-line to the line before.
7488
}
7589
`;
7690
91+
exports[`webpack message formatting formats file not found error 1`] = `
92+
Object {
93+
"stderr": "Creating an optimized production build...
94+
Failed to compile.
95+
96+
./src/App.js
97+
Cannot find file './ThisFileSouldNotExist' in './src'.
98+
99+
100+
",
101+
"stdout": "",
102+
}
103+
`;
104+
77105
exports[`webpack message formatting formats missing package 1`] = `
78106
Object {
79107
"stderr": "Creating an optimized production build...
80-
Failed to compile.
81-

82-
Module not found: Error: Can't resolve 'unknown-package' in '/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/bf26e1d3700ad14275f6eefb5e4417c1/src'
108+
Failed to compile.
109+
110+
./src/App.js
111+
Cannot find module: 'unknown-package'. Make sure this package is installed.
112+
113+
You can install this package by running: yarn add unknown-package.
114+
115+
116+
",
117+
"stdout": "",
118+
}
119+
`;
120+
121+
exports[`webpack message formatting formats no default export 1`] = `
122+
Object {
123+
"stderr": "Creating an optimized production build...
124+
Failed to compile.
125+
126+
./src/App.js
127+
Attempted import error: './ExportNoDefault' does not contain a default export (imported as 'myImport').
128+
129+
130+
",
131+
"stdout": "",
132+
}
133+
`;
134+
135+
exports[`webpack message formatting formats out of scope error 1`] = `
136+
Object {
137+
"stderr": "Creating an optimized production build...
138+
Failed to compile.
139+
140+
./src/App.js
141+
You attempted to import ../OutOfScopeImport which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
142+
You can either move it inside src/, or add a symlink to it from project's node_modules/.
83143
84144
85145
",
@@ -93,7 +153,22 @@ Object {
93153
Failed to compile.
94154
95155
./src/App.js
96-
1:1677-1680 './AppUnknownExport' does not contain an export named 'bar'.
156+
Attempted import error: 'bar' is not exported from './AppUnknownExport'.
157+
158+
159+
",
160+
"stdout": "",
161+
}
162+
`;
163+
164+
exports[`webpack message formatting helps when users tries to use sass 1`] = `
165+
Object {
166+
"stderr": "Creating an optimized production build...
167+
Failed to compile.
168+
169+
./src/AppSass.scss
170+
To import Sass files, you first need to install node-sass.
171+
Run \`npm install node-sass\` or \`yarn add node-sass\` inside your workspace.
97172
98173
99174
",

‎fixtures/output/webpack-message-formatting/index.test.js

+77-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
const { bootstrap, getOutputProduction } = require('../../utils');
1+
const {
2+
bootstrap,
3+
getOutputDevelopment,
4+
getOutputProduction,
5+
} = require('../../utils');
26
const fs = require('fs-extra');
37
const path = require('path');
48
const Semaphore = require('async-sema');
@@ -19,7 +23,7 @@ describe('webpack message formatting', () => {
1923
semaphore.release();
2024
});
2125

22-
xit('formats babel syntax error', async () => {
26+
it('formats babel syntax error', async () => {
2327
fs.copySync(
2428
path.join(__dirname, 'src', 'AppBabel.js'),
2529
path.join(testDirectory, 'src', 'App.js')
@@ -29,8 +33,7 @@ describe('webpack message formatting', () => {
2933
expect(response).toMatchSnapshot();
3034
});
3135

32-
xit('formats css syntax error', async () => {
33-
// TODO: fix me!
36+
it('formats css syntax error', async () => {
3437
fs.copySync(
3538
path.join(__dirname, 'src', 'AppCss.js'),
3639
path.join(testDirectory, 'src', 'App.js')
@@ -40,8 +43,7 @@ describe('webpack message formatting', () => {
4043
expect(response).toMatchSnapshot();
4144
});
4245

43-
xit('formats unknown export', async () => {
44-
// TODO: fix me!
46+
it('formats unknown export', async () => {
4547
fs.copySync(
4648
path.join(__dirname, 'src', 'AppUnknownExport.js'),
4749
path.join(testDirectory, 'src', 'App.js')
@@ -51,8 +53,27 @@ describe('webpack message formatting', () => {
5153
expect(response).toMatchSnapshot();
5254
});
5355

54-
xit('formats missing package', async () => {
55-
// TODO: fix me!
56+
it('formats aliased unknown export', async () => {
57+
fs.copySync(
58+
path.join(__dirname, 'src', 'AppAliasUnknownExport.js'),
59+
path.join(testDirectory, 'src', 'App.js')
60+
);
61+
62+
const response = await getOutputProduction({ directory: testDirectory });
63+
expect(response).toMatchSnapshot();
64+
});
65+
66+
it('formats no default export', async () => {
67+
fs.copySync(
68+
path.join(__dirname, 'src', 'AppNoDefault.js'),
69+
path.join(testDirectory, 'src', 'App.js')
70+
);
71+
72+
const response = await getOutputProduction({ directory: testDirectory });
73+
expect(response).toMatchSnapshot();
74+
});
75+
76+
it('formats missing package', async () => {
5677
fs.copySync(
5778
path.join(__dirname, 'src', 'AppMissingPackage.js'),
5879
path.join(testDirectory, 'src', 'App.js')
@@ -85,4 +106,52 @@ describe('webpack message formatting', () => {
85106
const response = await getOutputProduction({ directory: testDirectory });
86107
expect(response).toMatchSnapshot();
87108
});
109+
110+
it('helps when users tries to use sass', async () => {
111+
fs.copySync(
112+
path.join(__dirname, 'src', 'AppSass.js'),
113+
path.join(testDirectory, 'src', 'App.js')
114+
);
115+
116+
const response = await getOutputProduction({ directory: testDirectory });
117+
expect(response).toMatchSnapshot();
118+
});
119+
120+
it('formats file not found error', async () => {
121+
fs.copySync(
122+
path.join(__dirname, 'src', 'AppUnknownFile.js'),
123+
path.join(testDirectory, 'src', 'App.js')
124+
);
125+
126+
const response = await getOutputProduction({ directory: testDirectory });
127+
expect(response).toMatchSnapshot();
128+
});
129+
130+
it('formats case sensitive path error', async () => {
131+
fs.copySync(
132+
path.join(__dirname, 'src', 'AppIncorrectCase.js'),
133+
path.join(testDirectory, 'src', 'App.js')
134+
);
135+
136+
const response = await getOutputDevelopment({ directory: testDirectory });
137+
if (process.platform === 'darwin') {
138+
expect(response.stderr).toMatch(
139+
`Cannot find file: 'export5.js' does not match the corresponding name on disk: './src/Export5.js'.`
140+
);
141+
} else {
142+
expect(response.stderr).not.toEqual(''); // TODO: figure out how we can test this on Linux/Windows
143+
// I believe getting this working requires we tap into enhanced-resolve
144+
// pipeline, which is debt we don't want to take on right now.
145+
}
146+
});
147+
148+
it('formats out of scope error', async () => {
149+
fs.copySync(
150+
path.join(__dirname, 'src', 'AppOutOfScopeImport.js'),
151+
path.join(testDirectory, 'src', 'App.js')
152+
);
153+
154+
const response = await getOutputProduction({ directory: testDirectory });
155+
expect(response).toMatchSnapshot();
156+
});
88157
});

‎fixtures/output/webpack-message-formatting/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
{
22
"dependencies": {
3-
"node-sass": "4.x",
43
"react": "latest",
5-
"react-dom": "latest",
6-
"react-scripts": "latest"
4+
"react-dom": "latest"
75
},
86
"browserslist": [
97
">0.2%"

‎fixtures/output/webpack-message-formatting/src/AppAliasUnknownExport.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
import { bar as bar2 } from './AppUnknownExport';
3+
4+
class App extends Component {
5+
componentDidMount() {
6+
bar2();
7+
}
8+
render() {
9+
return <div />;
10+
}
11+
}
12+
13+
export default App;

‎fixtures/output/webpack-message-formatting/src/AppIncorrectCase.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import five from './export5';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App">{five}</div>;
7+
}
8+
}
9+
10+
export default App;

‎fixtures/output/webpack-message-formatting/src/AppNoDefault.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import myImport from './ExportNoDefault';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App">{myImport}</div>;
7+
}
8+
}
9+
10+
export default App;

‎fixtures/output/webpack-message-formatting/src/AppOutOfScopeImport.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import myImport from '../OutOfScopeImport';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App">{myImport}</div>;
7+
}
8+
}
9+
10+
export default App;

‎fixtures/output/webpack-message-formatting/src/AppSass.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import './AppSass.scss';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App" />;
7+
}
8+
}
9+
10+
export default App;

‎fixtures/output/webpack-message-formatting/src/AppSass.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.App {
2+
color: red;
3+
}

‎fixtures/output/webpack-message-formatting/src/AppUnknownFile.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import DefaultExport from './ThisFileSouldNotExist';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App" />;
7+
}
8+
}
9+
10+
export default App;

‎fixtures/output/webpack-message-formatting/src/Export5.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export default 5;

‎fixtures/output/webpack-message-formatting/src/ExportNoDefault.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const six = 6;

‎fixtures/smoke/boostrap-sass/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"bootstrap": "4.x",
44
"node-sass": "4.x",
55
"react": "latest",
6-
"react-dom": "latest",
7-
"react-scripts": "latest"
6+
"react-dom": "latest"
87
}
98
}

‎fixtures/smoke/builds-with-multiple-runtimes/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
"dva": "2.4.0",
44
"ky": "0.3.0",
55
"react": "latest",
6-
"react-dom": "latest",
7-
"react-scripts": "latest"
6+
"react-dom": "latest"
87
}
98
}

‎fixtures/smoke/graphql-with-mjs/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
"graphql": "14.0.2",
55
"react-apollo": "2.2.1",
66
"react": "latest",
7-
"react-dom": "latest",
8-
"react-scripts": "latest"
7+
"react-dom": "latest"
98
}
109
}

‎fixtures/smoke/relative-paths/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
{
2-
"dependencies": {
3-
"react-scripts": "latest"
4-
},
2+
"dependencies": {},
53
"homepage": "."
64
}

0 commit comments

Comments
 (0)