test: 💍 Add e2e testing

Author: dc7290

.eslintignore

@@ -15,3 +15,6 @@ changelog.config.js
 
 # examples
 /examples
+
+# testing
+__tests__/e2e

.gitignore

@@ -14,6 +14,7 @@ dist
 /__tests__/cli/cache/.cache
 /__tests__/cli/cache/results
 /__tests__/components/image/manifest/manifest.json
+/__tests__/e2e/out
 
 # benchmark
 /bench/fixtures/results

CONTRIBUTING.md

@@ -29,9 +29,9 @@ Run `yarn` to install dependencies.
 
 You can run the test as follows.
 
-| common      | watch             | cli             | cli watch             | components             | components watch             |
-| ----------- | ----------------- | --------------- | --------------------- | ---------------------- | ---------------------------- |
-| `yarn test` | `yarn test:watch` | `yarn test:cli` | `yarn test:cli:watch` | `yarn test:components` | `yarn test:components:watch` |
+| common      | watch             | cli             | cli watch             | components             | components watch             | e2e             |
+| ----------- | ----------------- | --------------- | --------------------- | ---------------------- | ---------------------------- | --------------- |
+| `yarn test` | `yarn test:watch` | `yarn test:cli` | `yarn test:cli:watch` | `yarn test:components` | `yarn test:components:watch` | `yarn test:e2e` |
 
 ### Commit
 

__tests__/cli/cache/index.test.ts

@@ -6,7 +6,7 @@ import type { CacheImages } from '../../../src/cli/utils/cache'
 
 const cacheDir = path.resolve(__dirname, '.cache')
 
-jest.setTimeout(10000)
+jest.setTimeout(60 * 3 * 1000)
 
 beforeAll(async () => {
   const resultsDir = path.resolve(__dirname, 'results')

__tests__/e2e/cli.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+require('../../dist/cli').run({
+  customManifestJsonPath: '__tests__/e2e/.next/custom-optimized-images.nd.json',
+  noCache: true,
+})

__tests__/e2e/export-images.config.js

@@ -0,0 +1,16 @@
+/**
+ * @type {import('../../src').Config}
+ */
+const config = {
+  outDir: '__tests__/e2e/out',
+  sharpOptions: {
+    webp: {
+      effort: 0,
+    },
+  },
+  convertFormat: [
+    ['png', 'webp']
+  ]
+}
+
+module.exports = config

__tests__/e2e/images/client-only.png

@@ -0,0 +1,23 @@
+import fs from 'fs'
+import path from 'path'
+
+const exist = (filename: string) => fs.existsSync(path.resolve(__dirname, 'out/_next/static/chunks/images', filename))
+
+const files = [
+  '_next/static/media/img.8a5ad2fe_1920_75.webp',
+  '_next/static/media/img.8a5ad2fe_3840_75.webp',
+  'images/img_640_75.webp',
+  'images/img_750_75.webp',
+  'images/img_828_75.webp',
+  'images/img_1080_75.webp',
+  'images/img_1200_75.webp',
+  'images/img_1920_75.webp',
+  'images/img_2048_75.webp',
+  'images/img_3840_75.webp',
+]
+
+describe('`next build && next export && next-export-optimize-images` is executed correctly', () => {
+  test('Images are being generated.', () => {
+    expect(files.every((file) => exist(file))).toBeTruthy()
+  })
+})

__tests__/e2e/images/img.png

@@ -0,0 +1,10 @@
+const withExportImages = require('../../dist/index')
+
+const config = {
+  reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = withExportImages(config, { configPath: '__tests__/e2e/export-images.config.js' })

__tests__/e2e/index.test.ts

@@ -0,0 +1,5 @@
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

__tests__/e2e/next.config.js

@@ -0,0 +1,26 @@
+import Image from '../../../dist/image'
+
+import imgSrc from '../images/img.png'
+import clientOnlySrc from '../images/client-only.png'
+import { useEffect, useState } from 'react'
+
+const IndexPage = () => {
+  const [isClient, setIsClient] = useState(false)
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return (
+    <div>
+      {/* Imported image */}
+      <Image src={imgSrc} priority />
+
+      {/* Static image */}
+      <Image src="/images/img.png" width={1920} height={1280} sizes="(min-width: 768px) 720px, 85vw" />
+
+      {isClient && <Image src={clientOnlySrc} />}
+    </div>
+  )
+}
+
+export default IndexPage

__tests__/e2e/pages/_app.jsx

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../dist/cli').run()
+require('../dist/cli').run({})

__tests__/e2e/pages/index.jsx

@@ -25,12 +25,15 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
+    "pretest": "rimraf {__tests__/e2e/.next,__tests__/e2e/out} && swc src -d dist && TEST_JSON_PATH=__tests__/e2e/.next/custom-optimized-images.nd.json next build __tests__/e2e && next export __tests__/e2e && node __tests__/e2e/cli.js",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cli": "jest __tests__/cli/**/*.test.ts",
     "test:cli:watch": "jest --watch __tests__/cli/**/*.test.ts",
     "test:components": "jest __tests__/components/**/*.test.tsx",
     "test:components:watch": "jest --watch __tests__/components/**/*.test.tsx",
+    "pretest:e2e": "yarn pretest",
+    "test:e2e": "jest __tests__/e2e/index.test.ts",
     "semantic-release": "SKIP_BY_SEMANTIC_RELEASE=true semantic-release"
   },
   "lint-staged": {

__tests__/e2e/public/images/img.png

@@ -189,12 +189,14 @@ export const optimizeImages = async ({ manifestJsonPath, noCache, config, terse
   }
 }
 
-export const run = () => {
+type Run = (args: { customManifestJsonPath?: string; noCache?: boolean }) => void
+
+export const run: Run = ({ customManifestJsonPath, noCache = false }) => {
   // eslint-disable-next-line no-console
   console.log('\x1b[35m\nnext-export-optimize-images: Optimize images.', '\x1b[39m')
 
   const config = getConfig()
-  const manifestJsonPath = path.resolve(cwd, '.next/custom-optimized-images.nd.json')
+  const manifestJsonPath = path.resolve(cwd, customManifestJsonPath ?? '.next/custom-optimized-images.nd.json')
 
-  optimizeImages({ manifestJsonPath, noCache: false, config })
+  optimizeImages({ manifestJsonPath, noCache, config })
 }