Add webpack-image-optimization test

test/fixtures/webpack-image-optimization/index.test.js

@@ -0,0 +1,25 @@
+const testSetup = require('../__shared__/test-setup');
+
+const fs = require('fs-extra');
+const globby = require('globby');
+const path = require('path');
+
+test('optimizes in production', async () => {
+  const { fulfilled } = await testSetup.scripts.build();
+  expect(fulfilled).toBe(true);
+
+  const buildDir = path.join(testSetup.testDirectory, 'build');
+  const builtImageFile = path.join(
+    buildDir,
+    globby.sync('**/*.png', { cwd: buildDir }).pop()
+  );
+  const recievedBuf = fs.readFileSync(builtImageFile);
+
+  const expectedImageFile = path.join(
+    testSetup.templateDirectory,
+    './src/images/webpack-optimized.png'
+  );
+  const expectedBuf = fs.readFileSync(expectedImageFile);
+
+  expect(recievedBuf).toStrictEqual(expectedBuf);
+});

test/fixtures/webpack-image-optimization/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

test/fixtures/webpack-image-optimization/src/index.css

@@ -0,0 +1,5 @@
+#root {
+  width: 300px;
+  height: 300px;
+  background: url(./images/webpack-unoptimized.png) center/cover no-repeat;
+}

test/fixtures/webpack-image-optimization/src/index.js

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