Merge #1864

1864: chore(spec): add test for image handling r=herschel666 a=herschel666

<details>
<summary>Bors merge bot cheat sheet</summary>

We are using [bors-ng](https://github.com/bors-ng/bors-ng) to automate merging of our pull requests. The following table provides a summary of commands that are available to reviewers (members of this repository with push access) and delegates (in case of `bors delegate+` or `bors delegate=[list]`).

| Syntax | Description |
| --- | --- |
| bors merge | Run the test suite and push to master if it passes. Short for "reviewed: looks good." |
| bors merge- | Cancel an r+, r=, merge, or merge= |
| bors try | Run the test suite without pushing to master. |
| bors try- | Cancel a try |
| bors delegate+ | Allow the pull request author to merge their changes. |
| bors delegate=[list] | Allow the listed users to r+ this pull request's changes. |
| bors retry | Run the previous command a second time. |

This is a short collection of opinionated commands. For a full list of the commands read the [bors reference](https://bors.tech/documentation/).

</details>


Co-authored-by: Emanuel Kluge <[email protected]>

packages/spec/integration/react/__tests__/develop.js

@@ -151,4 +151,15 @@ describe('react development server', () => {
     const content = await response.text();
     expect(content).toMatch('data:;base64,iVBORw0KGgo=');
   });
+
+  it('renders images', async () => {
+    const { page } = await createPage();
+    page.on('console', (msg) => handleConsoleOutput(msg));
+    await page.goto(urlJoin(url, '/images'), { waitUntil: 'networkidle2' });
+
+    await expect(page.$$('img[src^="data:image/"]')).resolves.toHaveLength(2);
+    await expect(page.$$('img[src$=".png"]')).resolves.toHaveLength(1);
+
+    await page.close();
+  });
 });

packages/spec/integration/react/images.js

@@ -0,0 +1,15 @@
+/* eslint react/react-in-jsx-scope: off */
+import gif from './img/img.gif';
+import jpg from './img/img.jpg';
+// eslint-disable-next-line import/no-unresolved
+import png from './img/img.png?noinline';
+
+export function Images() {
+  return (
+    <div>
+      <img src={gif} alt="" />
+      <img src={jpg} alt="" />
+      <img src={png} alt="" />
+    </div>
+  );
+}

packages/spec/integration/react/index.js

@@ -24,6 +24,10 @@ const BoldText = importComponent(() =>
     './bold-text'
   )
 );
+const Images = importComponent(
+  () => import('./images'),
+  (mod) => mod.Images
+);
 
 const ServerDataHoC = withServerData(({ serverData }) => (
   <output>{serverData.method}</output>
@@ -58,6 +62,9 @@ export default render(
     </Helmet>
     <div>
       <Link to="/two">Link to two</Link>
+      <>&#8199;</>
+      <Link to="/images">Link to images</Link>
+      <>&#8199;</>
       <Link to="/import">Link to import</Link>
       <Switch>
         <Route path="/" exact render={() => <h1>home</h1>} />
@@ -75,6 +82,7 @@ export default render(
         <Route path="/server-data-hook" exact component={ServerDataHook} />
         <Route path="/config-hoc" exact component={ConfigHoC} />
         <Route path="/config-hook" exact component={ConfigHook} />
+        <Route path="/images" exact component={Images} />
         <Miss />
       </Switch>
     </div>