Add browser test for graphql (#5263)

fixtures/browser/graphql-with-mjs/__snapshots__/index.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graphql with mjs entrypoint correctly bundles files in development 1`] = `"Pikachu"`;
+
+exports[`graphql with mjs entrypoint correctly bundles files in production 1`] = `"Pikachu"`;

fixtures/browser/graphql-with-mjs/index.test.js

@@ -0,0 +1,56 @@
+const {
+  bootstrap,
+  startDevelopmentServer,
+  startProductionServer,
+} = require('../../utils');
+const puppeteer = require('puppeteer');
+
+beforeEach(async () => {
+  await bootstrap({ directory: global.testDirectory, template: __dirname });
+  global.appDevPort = await startDevelopmentServer({
+    directory: global.testDirectory,
+  });
+  global.appProdPort = await startProductionServer({
+    directory: global.testDirectory,
+  });
+  // Wait for serve to boot up
+  await new Promise(resolve => setTimeout(resolve, 1000));
+});
+
+// https://github.com/facebook/create-react-app/issues/5234
+// https://github.com/facebook/create-react-app/pull/5258
+describe('graphql with mjs entrypoint', () => {
+  it('correctly bundles files in development', async () => {
+    const browser = await puppeteer.launch({ headless: true });
+    try {
+      const page = await browser.newPage();
+      await page.goto(`http://localhost:${global.appDevPort}/`);
+      await page.waitForSelector('.Pokemon-Name-Data');
+      const output = await page.evaluate(() => {
+        return Array.from(
+          document.getElementsByClassName('Pokemon-Name-Data')
+        ).pop().innerHTML;
+      });
+      expect(output).toMatchSnapshot();
+    } finally {
+      browser.close();
+    }
+  });
+
+  it('correctly bundles files in production', async () => {
+    const browser = await puppeteer.launch({ headless: true });
+    try {
+      const page = await browser.newPage();
+      await page.goto(`http://localhost:${global.appProdPort}/`);
+      await page.waitForSelector('.Pokemon-Name-Data');
+      const output = await page.evaluate(() => {
+        return Array.from(
+          document.getElementsByClassName('Pokemon-Name-Data')
+        ).pop().innerHTML;
+      });
+      expect(output).toMatchSnapshot();
+    } finally {
+      browser.close();
+    }
+  });
+});

fixtures/browser/graphql-with-mjs/package.json

@@ -4,6 +4,7 @@
     "graphql": "14.0.2",
     "react-apollo": "2.2.1",
     "react": "latest",
-    "react-dom": "latest"
+    "react-dom": "latest",
+    "serve": "10.0.2"
   }
 }

fixtures/browser/graphql-with-mjs/src/App.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import ApolloClient, { gql } from 'apollo-boost';
+import { ApolloProvider, Query } from 'react-apollo';
+
+const GET_PIKA = gql`
+  {
+    pokemon(name: "Pikachu") {
+      name
+    }
+  }
+`;
+
+const client = new ApolloClient({
+  uri: 'https://graphql-pokemon.now.sh/graphql',
+});
+
+class Pokemon extends Component {
+  render() {
+    const { name } = this.props.pokemon;
+    return (
+      <h1>
+        Pokemon name: <span className="Pokemon-Name-Data">{name}</span>
+      </h1>
+    );
+  }
+}
+
+class Data extends Component {
+  state = {};
+  componentDidCatch() {
+    this.setState({ hasError: true });
+  }
+  render() {
+    const { hasError } = this.state;
+    return hasError ? (
+      <div className="Pokemon-Name-Data">Error :(</div>
+    ) : (
+      <Query query={GET_PIKA}>
+        {({ loading, error, data }) => {
+          if (loading) {
+            return <div>Loading...</div>;
+          }
+          if (error) {
+            return <div className="Pokemon-Name-Data">Error :(</div>;
+          }
+          return <Pokemon pokemon={data.pokemon} />;
+        }}
+      </Query>
+    );
+  }
+}
+
+class App extends Component {
+  render() {
+    return (
+      <ApolloProvider client={client}>
+        <Data />
+      </ApolloProvider>
+    );
+  }
+}
+
+export default App;

fixtures/browser/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  testEnvironment: 'node',
+  testMatch: ['**/*.test.js'],
+  testPathIgnorePatterns: ['/src/', 'node_modules'],
+  setupTestFrameworkScriptFile: './setupBrowserTests.js',
+  forceExit: true,
+};

fixtures/browser/setupBrowserTests.js

@@ -0,0 +1,9 @@
+const fs = require('fs-extra');
+const tempy = require('tempy');
+beforeEach(() => {
+  global.testDirectory = tempy.directory();
+  jest.setTimeout(1000 * 60 * 5);
+});
+afterEach(() => {
+  fs.removeSync(global.testDirectory);
+});

fixtures/smoke/graphql-with-mjs/index.test.js

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

fixtures/smoke/graphql-with-mjs/src/App.js

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-
-import ApolloClient from 'apollo-boost';
-import { ApolloProvider } from 'react-apollo';
-
-const client = new ApolloClient({
-  uri: '/whatever',
-});
-
-class App extends Component {
-  render() {
-    return (
-      <ApolloProvider client={client}>
-        <div />
-      </ApolloProvider>
-    );
-  }
-}
-
-export default App;

fixtures/utils.js

@@ -135,6 +135,36 @@ async function getOutputProduction({ directory, env = {} }) {
   }
 }
 
+async function startDevelopmentServer({ directory, env = {} }) {
+  const port = await getPort();
+  execa('./node_modules/.bin/react-scripts', ['start'], {
+    cwd: directory,
+    env: Object.assign(
+      {},
+      {
+        BROWSER: 'none',
+        PORT: port,
+        CI: 'false',
+        FORCE_COLOR: '0',
+      },
+      env
+    ),
+  });
+  return port;
+}
+
+async function startProductionServer({ directory, env = {} }) {
+  const port = await getPort();
+  await execa('./node_modules/.bin/react-scripts', ['build'], {
+    cwd: directory,
+    env: Object.assign({}, { CI: 'false' }, env),
+  });
+  execa('./node_modules/.bin/serve', ['-s', 'build', '-p', port], {
+    cwd: directory,
+  });
+  return port;
+}
+
 module.exports = {
   bootstrap,
   isSuccessfulDevelopment,
@@ -142,4 +172,6 @@ module.exports = {
   isSuccessfulTest,
   getOutputDevelopment,
   getOutputProduction,
+  startDevelopmentServer,
+  startProductionServer,
 };

package.json

@@ -32,6 +32,7 @@
     "meow": "^5.0.0",
     "multimatch": "^2.1.0",
     "prettier": "1.14.3",
+    "puppeteer": "^1.8.0",
     "strip-ansi": "^4.0.0",
     "svg-term-cli": "^2.1.1",
     "tempy": "^0.2.1"

tasks/e2e-behavior.sh

@@ -95,6 +95,9 @@ git clean -df
 # Now that we have published them, run all tests as if they were released.
 # ******************************************************************************
 
+# Browser tests
+CI=true ./node_modules/.bin/jest --config fixtures/browser/jest.config.js
+
 # Smoke tests
 CI=true ./node_modules/.bin/jest --config fixtures/smoke/jest.config.js