Run behavioral smoke tests with Jest, add output tests (#5150)

* Run smoke tests with Jest

* Get a unique port for smoke test

* Upgrade verdaccio across the board

* Drop unneeded step

* Try latest instead

* Boot registry in home directory

* Correct config path

* Add mutex

* Test webpack message formatting

* Strip color

* Add browserslist to default

* Disable another broken feature

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 });
+  });
+});