Run behavioral smoke tests with Jest, add output tests

fixtures/output/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+ testEnvironment: 'node',
+ testMatch: ['**/*.test.js'],
+ setupTestFrameworkScriptFile: './setupOutputTests.js',
+};

fixtures/output/setupOutputTests.js

@@ -0,0 +1,6 @@
+beforeAll(() => {
+ jest.setTimeout(1000 * 60 * 5);
+});
+beforeEach(() => {
+ jest.setTimeout(1000 * 60 * 5);
+});

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

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`webpack message formatting formats babel syntax error 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+Syntax error: Unterminated JSX contents (8:12)
+
+ 6 | <div>
+ 7 | <span>
+> 8 | </div>
+ | ^
+ 9 | );
+ 10 | }
+ 11 | }
+
+
+",
+ "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats css syntax error 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/AppCss.css
+Syntax Error: (3:2) Unexpected }
+
+  1 | .App {
+  2 |  color: red;
+> 3 | }}
+  |  ^
+  4 | 
+
+
+",
+ "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats eslint error 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+ Line 4: 'b' is not defined no-undef
+
+Search for the keywords to learn more about each error.
+
+
+",
+ "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats eslint warning 1`] = `
+Object {
+ "stderr": "",
+ "stdout": "Creating an optimized production build...
+Compiled with warnings.
+
+./src/App.js
+ Line 3: 'foo' is defined but never used no-unused-vars
+
+Search for the keywords to learn more about each warning.
+To ignore, add // eslint-disable-next-line to the line before.
+
+",
+}
+`;
+
+exports[`webpack message formatting formats missing package 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+Module not found: Error: Can't resolve 'unknown-package' in '/private/var/folders/c3/vytj6_h56b77f_g72smntm3m0000gn/T/bf26e1d3700ad14275f6eefb5e4417c1/src'
+
+
+",
+ "stdout": "",
+}
+`;
+
+exports[`webpack message formatting formats unknown export 1`] = `
+Object {
+ "stderr": "Creating an optimized production build...
+Failed to compile.
+
+./src/App.js
+1:1677-1680 './AppUnknownExport' does not contain an export named 'bar'.
+
+
+",
+ "stdout": "",
+}
+`;

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

@@ -0,0 +1,88 @@
+const { bootstrap, getOutputProduction } = require('../../utils');
+const fs = require('fs-extra');
+const path = require('path');
+const Semaphore = require('async-sema');
+const tempy = require('tempy');
+
+describe('webpack message formatting', () => {
+ const semaphore = new Semaphore(1, { capacity: Infinity });
+ let testDirectory;
+ beforeAll(async () => {
+ testDirectory = tempy.directory();
+ await bootstrap({ directory: testDirectory, template: __dirname });
+ });
+ beforeEach(async () => {
+ await semaphore.acquire();
+ });
+ afterEach(async () => {
+ fs.removeSync(path.join(testDirectory, 'src', 'App.js'));
+ semaphore.release();
+ });
+
+ it('formats babel syntax error', async () => {
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppBabel.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
+
+ xit('formats css syntax error', async () => {
+ // TODO: fix me!
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppCss.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
+
+ xit('formats unknown export', async () => {
+ // TODO: fix me!
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppUnknownExport.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
+
+ xit('formats missing package', async () => {
+ // TODO: fix me!
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppMissingPackage.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
+
+ it('formats eslint warning', async () => {
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppLintWarning.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ const sizeIndex = response.stdout.indexOf('File sizes after gzip');
+ if (sizeIndex !== -1) {
+ response.stdout = response.stdout.substring(0, sizeIndex);
+ }
+ expect(response).toMatchSnapshot();
+ });
+
+ it('formats eslint error', async () => {
+ fs.copySync(
+ path.join(__dirname, 'src', 'AppLintError.js'),
+ path.join(testDirectory, 'src', 'App.js')
+ );
+
+ const response = await getOutputProduction({ directory: testDirectory });
+ expect(response).toMatchSnapshot();
+ });
+});

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

@@ -0,0 +1,11 @@
+{
+ "dependencies": {
+ "node-sass": "4.x",
+ "react": "latest",
+ "react-dom": "latest",
+ "react-scripts": "latest"
+ },
+ "browserslist": [
+ ">0.2%"
+ ]
+}

fixtures/output/webpack-message-formatting/public/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <title>React App</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+</html>

fixtures/output/webpack-message-formatting/src/AppBabel.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class App extends Component {
+ render() {
+ return (
+ <div>
+ <span>
+ </div>
+ );
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppCss.css

@@ -0,0 +1,3 @@
+.App {
+ color: red;
+}}

fixtures/output/webpack-message-formatting/src/AppCss.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import './AppCss.css';
+
+class App extends Component {
+ render() {
+ return <div className="App" />;
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppLintError.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+function foo() {
+ const a = b;
+}
+
+class App extends Component {
+ render() {
+ return <div />;
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppLintWarning.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+function foo() {}
+
+class App extends Component {
+ render() {
+ return <div />;
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppMissingPackage.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { bar } from 'unknown-package';
+
+class App extends Component {
+ componentDidMount() {
+ bar();
+ }
+ render() {
+ return <div />;
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/AppUnknownExport.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { bar } from './AppUnknownExport';
+
+class App extends Component {
+ componentDidMount() {
+ bar();
+ }
+ render() {
+ return <div />;
+ }
+}
+
+export default App;

fixtures/output/webpack-message-formatting/src/FooExport.js

@@ -0,0 +1,3 @@
+export function foo() {
+ console.log('bar');
+}

fixtures/output/webpack-message-formatting/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

fixtures/smoke/boostrap-sass/index.test.js

@@ -0,0 +1,17 @@
+const {
+ bootstrap,
+ isSuccessfulDevelopment,
+ isSuccessfulProduction,
+} = require('../../utils');
+beforeEach(async () => {
+ await bootstrap({ directory: global.testDirectory, template: __dirname });
+});
+
+describe('bootstrap sass', () => {
+ it('builds in development', async () => {
+ await isSuccessfulDevelopment({ directory: global.testDirectory });
+ });
+ it('builds in production', async () => {
+ await isSuccessfulProduction({ directory: global.testDirectory });
+ });
+});

fixtures/smoke/boostrap-sass/package.json

@@ -0,0 +1,9 @@
+{
+ "dependencies": {
+ "bootstrap": "4.x",
+ "node-sass": "4.x",
+ "react": "latest",
+ "react-dom": "latest",
+ "react-scripts": "latest"
+ }
+}

fixtures/smoke/boostrap-sass/public/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <title>React App</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ </body>
+</html>

fixtures/smoke/boostrap-sass/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.sass';
+
+ReactDOM.render(<div />, document.getElementById('root'));

fixtures/smoke/boostrap-sass/src/index.sass

@@ -0,0 +1 @@
+@import "~bootstrap/scss/bootstrap.scss";

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

@@ -0,0 +1,17 @@
+const {
+ bootstrap,
+ isSuccessfulDevelopment,
+ isSuccessfulProduction,
+} = require('../../utils');
+beforeEach(async () => {
+ await bootstrap({ directory: global.testDirectory, template: __dirname });
+});
+
+describe('builds-with-multiple-runtimes', () => {
+ it('builds in development', async () => {
+ await isSuccessfulDevelopment({ directory: global.testDirectory });
+ });
+ it('builds in production', async () => {
+ await isSuccessfulProduction({ directory: global.testDirectory });
+ });
+});