test: 💍 Linting test files with recommended rules

.eslintignore

@@ -1,5 +1,6 @@
 # config
 .eslintrc.js
+jest-setup.js
 **/*config.js
 
 # git
@@ -13,3 +14,4 @@
 
 # testing
 __tests__/e2e/cli.js
+__tests__/e2e/out

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     node: true,
     'jest/globals': true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:jest-dom/recommended', 'prettier'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 2021,
@@ -45,4 +45,10 @@ module.exports = {
     'no-restricted-syntax': 'off',
     'no-console': ['error', { allow: ['warn', 'error'] }],
   },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react', 'plugin:jest-dom/recommended'],
+    },
+  ],
 }

.gitignore

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

__tests__/components/image/config/index.test.tsx

@@ -12,6 +12,6 @@ describe('Apply config', () => {
   test('Set `imageDir` and `filenameGenerator` and `convetFormat`', () => {
     render(<CustomImage src="/images/img.png" width={1920} height={1280} priority />)
 
-    expect(screen.getByRole('img').getAttribute('src')).toBe('/base-path/_custom-optimize/images-img.3840.75.webp')
+    expect(screen.getByRole('img')).toHaveAttribute('src', '/base-path/_custom-optimize/images-img.3840.75.webp')
   })
 })

__tests__/components/image/external-images/index.test.tsx

@@ -6,7 +6,7 @@ process.env['TEST_JSON_PATH'] = '__tests__/components/image/external-images/mani
 
 import path from 'path'
 
-import { cleanup, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import fs from 'fs-extra'
 import React from 'react'
 
@@ -16,13 +16,11 @@ import processManifest from '../../../../src/utils/processManifest'
 
 const manifestPath = path.resolve(__dirname, 'manifest.json')
 
+beforeAll(async () => {
+  await fs.remove(manifestPath)
+})
 describe('External images', () => {
-  beforeAll(async () => {
-    await fs.remove(manifestPath)
-  })
-
-  beforeEach(() => {
-    cleanup()
+  test('Manifest.json is output correctly', () => {
     render(
       <CustomImage
         src="https://next-export-optimize-images.vercel.app/sub-path/og.png"
@@ -31,9 +29,7 @@ describe('External images', () => {
         priority
       />
     )
-  })
 
-  test('Manifest.json is output correctly', () => {
     const manifest = uniqueItems(processManifest(fs.readFileSync(manifestPath, 'utf-8')))
     expect(manifest).toEqual([
       {
@@ -56,10 +52,21 @@ describe('External images', () => {
   })
 
   test('URLs of external images are set correctly', () => {
-    expect(screen.getByRole('img').getAttribute('src')).toBe(
+    render(
+      <CustomImage
+        src="https://next-export-optimize-images.vercel.app/sub-path/og.png"
+        width={1920}
+        height={1280}
+        priority
+      />
+    )
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
       '/base-path/_next/static/chunks/images/sub-path/og_3840_75.webp'
     )
-    expect(screen.getByRole('img').getAttribute('srcset')).toBe(
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'srcset',
       '/base-path/_next/static/chunks/images/sub-path/og_1920_75.webp 1x, /base-path/_next/static/chunks/images/sub-path/og_3840_75.webp 2x'
     )
   })

__tests__/components/image/index.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen, cleanup } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import CustomImage from '../../../src/image'
@@ -22,77 +22,66 @@ const staticRequireSrc = {
 
 describe('CustomImage', () => {
   describe('String src', () => {
-    beforeEach(() => {
-      cleanup()
-    })
-
     test('Src and srcset are set correctly', () => {
       render(<CustomImage src="/img.png" width={1920} height={1280} priority />)
 
-      expect(screen.getByRole('img').getAttribute('src')).toBe('/_next/static/chunks/images/img_3840_75.png')
-      expect(screen.getByRole('img').getAttribute('srcSet')).toBe(
+      expect(screen.getByRole('img')).toHaveAttribute('src', '/_next/static/chunks/images/img_3840_75.png')
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'srcset',
         '/_next/static/chunks/images/img_1920_75.png 1x, /_next/static/chunks/images/img_3840_75.png 2x'
       )
     })
 
     test('BlurDataURL is set correctly', () => {
       render(<CustomImage src="/img.png" width={1920} height={1280} placeholder="blur" />)
 
-      expect(screen.getByRole('img').style.backgroundImage).toBe('url(/_next/static/chunks/images/img_8_10.png)')
+      expect(screen.getByRole('img')).toHaveStyle({ backgroundImage: 'url(/_next/static/chunks/images/img_8_10.png)' })
     })
   })
 
   describe('StaticRequire src', () => {
-    beforeEach(() => {
-      cleanup()
-    })
-
     test('Src and srcset are set correctly', () => {
       render(<CustomImage src={staticRequireSrc} priority />)
 
-      expect(screen.getByRole('img').getAttribute('src')).toBe(
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
         '/_next/static/chunks/images/_next/static/media/image.819f8209_3840_75.png'
       )
-      expect(screen.getByRole('img').getAttribute('srcset')).toBe(
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'srcset',
         '/_next/static/chunks/images/_next/static/media/image.819f8209_1920_75.png 1x, /_next/static/chunks/images/_next/static/media/image.819f8209_3840_75.png 2x'
       )
     })
 
     test('BlurDataURL is set correctly', () => {
       render(<CustomImage src={staticRequireSrc} placeholder="blur" />)
 
-      expect(screen.getByRole('img').style.backgroundImage).toBe(`url(${blurDataURL})`)
+      expect(screen.getByRole('img')).toHaveStyle({ backgroundImage: `url(${blurDataURL})` })
     })
   })
 
   describe('StaticImageData src', () => {
-    beforeEach(() => {
-      cleanup()
-    })
-
     test('Src and srcset are set correctly', () => {
       render(<CustomImage src={staticImageData} priority />)
 
-      expect(screen.getByRole('img').getAttribute('src')).toBe(
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'src',
         '/_next/static/chunks/images/_next/static/media/image.819f8209_3840_75.png'
       )
-      expect(screen.getByRole('img').getAttribute('srcset')).toBe(
+      expect(screen.getByRole('img')).toHaveAttribute(
+        'srcset',
         '/_next/static/chunks/images/_next/static/media/image.819f8209_1920_75.png 1x, /_next/static/chunks/images/_next/static/media/image.819f8209_3840_75.png 2x'
       )
     })
 
     test('BlurDataURL is set correctly', () => {
       render(<CustomImage src={staticImageData} placeholder="blur" />)
 
-      expect(screen.getByRole('img').style.backgroundImage).toBe(`url(${blurDataURL})`)
+      expect(screen.getByRole('img')).toHaveStyle({ backgroundImage: `url(${blurDataURL})` })
     })
   })
 
   describe('Override props.', () => {
-    beforeEach(() => {
-      cleanup()
-    })
-
     test('Loader is set correctly', () => {
       render(
         <CustomImage
@@ -102,13 +91,13 @@ describe('CustomImage', () => {
         />
       )
 
-      expect(screen.getByRole('img').getAttribute('src')).toBe('/_next/static/media/image.819f8209.png?w=3840&q=75')
+      expect(screen.getByRole('img')).toHaveAttribute('src', '/_next/static/media/image.819f8209.png?w=3840&q=75')
     })
 
     test('BlurDataURL is set correctly', () => {
       render(<CustomImage src={staticRequireSrc} blurDataURL="customBlurDataURL" placeholder="blur" />)
 
-      expect(screen.getByRole('img').style.backgroundImage).toBe('url(customBlurDataURL)')
+      expect(screen.getByRole('img')).toHaveStyle({ backgroundImage: 'url(customBlurDataURL)' })
     })
   })
 })

__tests__/e2e/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

__tests__/e2e/pages/_app.jsx

@@ -1,3 +1,9 @@
+import React from 'react'
+
+/**
+ * @param {import('next/app').AppProps} param0
+ * @returns
+ */
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

__tests__/e2e/pages/index.jsx

@@ -1,8 +1,8 @@
-import Image from '../../../dist/image'
+import React, { useEffect, useState } from 'react'
 
-import imgSrc from '../images/img.png'
+import Image from '../../../dist/image'
 import clientOnlySrc from '../images/client-only.png'
-import { useEffect, useState } from 'react'
+import imgSrc from '../images/img.png'
 
 const IndexPage = () => {
   const [isClient, setIsClient] = useState(false)

changelog.config.js

@@ -23,11 +23,11 @@ module.exports = {
   /**
    * コミットメッセージ最大文字数
    */
-  // maxMessageLength: 64,
+  maxMessageLength: 64,
   /**
    * コミットメッセージ最小文字数
    */
-  // minMessageLength: 3,
+  minMessageLength: 3,
   /**
    * コミット時に入力する項目
    */

jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

jest.config.js

@@ -2,4 +2,5 @@
 module.exports = {
   preset: 'ts-jest',
   testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts']
 }

package.json

@@ -30,6 +30,7 @@
     "prebuild": "rimraf dist",
     "build": "swc src -d dist && tsc --project ./tsconfig.build.json",
     "commitmsg": "commitlint -e $GIT_PARAMS",
+    "lint": "eslint {src,__tests__} --cache",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
     "pretest": "rimraf {__tests__/e2e/.next,__tests__/e2e/out} && swc src -d dist && cross-env TEST_JSON_PATH=__tests__/e2e/.next/custom-optimized-images.nd.json next build __tests__/e2e && next export __tests__/e2e && node __tests__/e2e/cli.js",
@@ -66,10 +67,11 @@
     "@swc/cli": "0.1.57",
     "@swc/core": "1.2.203",
     "@testing-library/react": "13.3.0",
+    "@testing-library/jest-dom": "5.16.4",
     "@tsconfig/strictest": "1.0.1",
     "@types/benchmark": "2.1.1",
     "@types/cli-progress": "3.11.0",
-    "@types/fs-extra": "^9.0.13",
+    "@types/fs-extra": "9.0.13",
     "@types/jest": "27.5.2",
     "@types/lodash.uniqwith": "4.5.7",
     "@types/node": "16.11.41",
@@ -85,6 +87,8 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-jest-dom": "^4.0.2",
+    "eslint-plugin-testing-library": "5.5.1",
     "git-cz": "4.9.0",
     "husky": "8.0.1",
     "jest": "28.1.1",

tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "@tsconfig/strictest/tsconfig.json",
   "compilerOptions": {
-    "jsx": "react"
+    "allowJs": true,
+    "jsx": "react",
+    "baseUrl": "./",
+    "noEmit": true
   },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./__tests__/**/*.test.ts", "./__tests__/**/*.test.tsx", "bench/index.ts"]
+  "include": ["src/**/*", "__tests__/**/*", "bench/index.ts", "jest-setup.ts"]
 }