Skip to content

Commit 261a933

Browse files
committed
Test webpack message formatting
1 parent 5669bdc commit 261a933

File tree

22 files changed

+332
-168
lines changed

22 files changed

+332
-168
lines changed

Diff for: fixtures/output/jest.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
testEnvironment: 'node',
3+
testMatch: ['**/*.test.js'],
4+
setupTestFrameworkScriptFile: './setupOutputTests.js',
5+
};

Diff for: fixtures/output/setupOutputTests.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
beforeAll(() => {
2+
jest.setTimeout(1000 * 60 * 5);
3+
});
4+
beforeEach(() => {
5+
jest.setTimeout(1000 * 60 * 5);
6+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`webpack message formatting formats babel syntax error 1`] = `
4+
Object {
5+
"stderr": "Creating an optimized production build...
6+
Failed to compile.
7+

8+
./src/App.js
9+
Syntax error: Unterminated JSX contents (8:12)
10+
11+
  6 |  <div>
12+
 7 |  <span>
13+
> 8 |  </div>
14+
 |  ^
15+
 9 |  );
16+
 10 |  }
17+
 11 | }
18+
19+
20+
",
21+
"stdout": "",
22+
}
23+
`;
24+
25+
exports[`webpack message formatting formats css syntax error 1`] = `
26+
Object {
27+
"stderr": "Creating an optimized production build...
28+
Failed to compile.
29+

30+
./src/AppCss.css
31+
Syntax Error: (3:2) Unexpected }
32+
33+
 1 | .App {
34+
 2 |  color: red;
35+
> 3 | }}
36+
 |  ^
37+
 4 | 
38+
39+
40+
",
41+
"stdout": "",
42+
}
43+
`;
44+
45+
exports[`webpack message formatting formats eslint error 1`] = `
46+
Object {
47+
"stderr": "Creating an optimized production build...
48+
Failed to compile.
49+

50+
./src/App.js
51+
Line 4: 'b' is not defined no-undef
52+
53+
Search for the keywords to learn more about each error.
54+
55+
56+
",
57+
"stdout": "",
58+
}
59+
`;
60+
61+
exports[`webpack message formatting formats eslint warning 1`] = `
62+
Object {
63+
"stderr": "",
64+
"stdout": "Creating an optimized production build...
65+
Compiled with warnings.
66+

67+
./src/App.js
68+
Line 3: 'foo' is defined but never used no-unused-vars
69+
70+
Search for the keywords to learn more about each warning.
71+
To ignore, add // eslint-disable-next-line to the line before.
72+
73+
",
74+
}
75+
`;
76+
77+
exports[`webpack message formatting formats missing package 1`] = `
78+
Object {
79+
"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'
83+
84+
85+
",
86+
"stdout": "",
87+
}
88+
`;
89+
90+
exports[`webpack message formatting formats unknown export 1`] = `
91+
Object {
92+
"stderr": "Creating an optimized production build...
93+
Failed to compile.
94+

95+
./src/App.js
96+
1:1677-1680 './AppUnknownExport' does not contain an export named 'bar'.
97+
98+
99+
",
100+
"stdout": "",
101+
}
102+
`;
+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const { bootstrap, getOutputProduction } = require('../../utils');
2+
const fs = require('fs-extra');
3+
const path = require('path');
4+
const Semaphore = require('async-sema');
5+
const tempy = require('tempy');
6+
7+
describe('webpack message formatting', () => {
8+
const semaphore = new Semaphore(1, { capacity: Infinity });
9+
let testDirectory;
10+
beforeAll(async () => {
11+
testDirectory = tempy.directory();
12+
await bootstrap({ directory: testDirectory, template: __dirname });
13+
});
14+
beforeEach(async () => {
15+
await semaphore.acquire();
16+
});
17+
afterEach(async () => {
18+
fs.removeSync(path.join(testDirectory, 'src', 'App.js'));
19+
semaphore.release();
20+
});
21+
22+
it('formats babel syntax error', async () => {
23+
fs.copySync(
24+
path.join(__dirname, 'src', 'AppBabel.js'),
25+
path.join(testDirectory, 'src', 'App.js')
26+
);
27+
28+
const response = await getOutputProduction({ directory: testDirectory });
29+
expect(response).toMatchSnapshot();
30+
});
31+
32+
xit('formats css syntax error', async () => {
33+
// TODO: fix me!
34+
fs.copySync(
35+
path.join(__dirname, 'src', 'AppCss.js'),
36+
path.join(testDirectory, 'src', 'App.js')
37+
);
38+
39+
const response = await getOutputProduction({ directory: testDirectory });
40+
expect(response).toMatchSnapshot();
41+
});
42+
43+
it('formats unknown export', async () => {
44+
fs.copySync(
45+
path.join(__dirname, 'src', 'AppUnknownExport.js'),
46+
path.join(testDirectory, 'src', 'App.js')
47+
);
48+
49+
const response = await getOutputProduction({ directory: testDirectory });
50+
expect(response).toMatchSnapshot();
51+
});
52+
53+
xit('formats missing package', async () => {
54+
// TODO: fix me!
55+
fs.copySync(
56+
path.join(__dirname, 'src', 'AppMissingPackage.js'),
57+
path.join(testDirectory, 'src', 'App.js')
58+
);
59+
60+
const response = await getOutputProduction({ directory: testDirectory });
61+
expect(response).toMatchSnapshot();
62+
});
63+
64+
it('formats eslint warning', async () => {
65+
fs.copySync(
66+
path.join(__dirname, 'src', 'AppLintWarning.js'),
67+
path.join(testDirectory, 'src', 'App.js')
68+
);
69+
70+
const response = await getOutputProduction({ directory: testDirectory });
71+
const sizeIndex = response.stdout.indexOf('File sizes after gzip');
72+
if (sizeIndex !== -1) {
73+
response.stdout = response.stdout.substring(0, sizeIndex);
74+
}
75+
expect(response).toMatchSnapshot();
76+
});
77+
78+
it('formats eslint error', async () => {
79+
fs.copySync(
80+
path.join(__dirname, 'src', 'AppLintError.js'),
81+
path.join(testDirectory, 'src', 'App.js')
82+
);
83+
84+
const response = await getOutputProduction({ directory: testDirectory });
85+
expect(response).toMatchSnapshot();
86+
});
87+
});
+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"dependencies": {
3+
"node-sass": "4.x",
4+
"react": "latest",
5+
"react-dom": "latest",
6+
"react-scripts": "latest"
7+
}
8+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>React App</title>
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
</body>
9+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
3+
class App extends Component {
4+
render() {
5+
return (
6+
<div>
7+
<span>
8+
</div>
9+
);
10+
}
11+
}
12+
13+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.App {
2+
color: red;
3+
}}
+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React, { Component } from 'react';
2+
import './AppCss.css';
3+
4+
class App extends Component {
5+
render() {
6+
return <div className="App" />;
7+
}
8+
}
9+
10+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
3+
function foo() {
4+
const a = b;
5+
}
6+
7+
class App extends Component {
8+
render() {
9+
return <div />;
10+
}
11+
}
12+
13+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { Component } from 'react';
2+
3+
function foo() {}
4+
5+
class App extends Component {
6+
render() {
7+
return <div />;
8+
}
9+
}
10+
11+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
import { bar } from 'unknown-package';
3+
4+
class App extends Component {
5+
componentDidMount() {
6+
bar();
7+
}
8+
render() {
9+
return <div />;
10+
}
11+
}
12+
13+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
import { bar } from './AppUnknownExport';
3+
4+
class App extends Component {
5+
componentDidMount() {
6+
bar();
7+
}
8+
render() {
9+
return <div />;
10+
}
11+
}
12+
13+
export default App;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function foo() {
2+
console.log('bar');
3+
}
+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('root'));

Diff for: fixtures/smoke/boostrap-sass/index.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const {
22
bootstrap,
33
isSuccessfulDevelopment,
44
isSuccessfulProduction,
5-
} = require('../utils');
5+
} = require('../../utils');
66
beforeEach(async () => {
77
await bootstrap({ directory: global.testDirectory, template: __dirname });
88
});

Diff for: fixtures/smoke/builds-with-multiple-runtimes/index.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const {
22
bootstrap,
33
isSuccessfulDevelopment,
44
isSuccessfulProduction,
5-
} = require('../utils');
5+
} = require('../../utils');
66
beforeEach(async () => {
77
await bootstrap({ directory: global.testDirectory, template: __dirname });
88
});

Diff for: fixtures/smoke/utils.js renamed to fixtures/utils.js

+25-1
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,28 @@ async function isSuccessfulProduction({ directory }) {
4242
}
4343
}
4444

45-
module.exports = { bootstrap, isSuccessfulDevelopment, isSuccessfulProduction };
45+
async function getOutputProduction({ directory, env = {} }) {
46+
try {
47+
const { stdout, stderr } = await execa(
48+
'./node_modules/.bin/react-scripts',
49+
['build'],
50+
{ cwd: directory, env: Object.assign({}, { FORCE_COLOR: '1' }, env) }
51+
);
52+
return { stdout, stderr };
53+
} catch (err) {
54+
return {
55+
stdout: '',
56+
stderr: err.message
57+
.split('\n')
58+
.slice(2)
59+
.join('\n'),
60+
};
61+
}
62+
}
63+
64+
module.exports = {
65+
bootstrap,
66+
isSuccessfulDevelopment,
67+
isSuccessfulProduction,
68+
getOutputProduction,
69+
};

Diff for: package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'"
1919
},
2020
"devDependencies": {
21+
"async-sema": "^2.1.3",
2122
"eslint": "5.6.0",
2223
"execa": "1.0.0",
2324
"fs-extra": "^7.0.0",

0 commit comments

Comments
 (0)