diff --git a/jest.config.js b/jest.config.js index 2be488205..af66d7809 100644 --- a/jest.config.js +++ b/jest.config.js @@ -8,4 +8,8 @@ module.exports = { '.cypress', 'node_modules', 'dist', ], testEnvironment: "jsdom", + moduleNameMapper: { + "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/test/__mocks__/fileMock.js", + "\\.(css|less)$": "/test/__mocks__/styleMock.js" + } }; diff --git a/package.json b/package.json index ab72e91fd..62e5e1318 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "electron": "^14.0.2", "electron-packager": "^15.4.0", "eslint": "^7.24.0", + "file-loader": "^6.2.0", "fork-ts-checker-webpack-plugin": "^6.3.3", "html-webpack-plugin": "^3.2.0", "http-server": "^13.0.1", diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 2eed8c77e..8840ea1b8 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -1,2 +1,8 @@ // Defined by webpack on startup or compilation declare let __COMMIT_HASH__: string; + +// When using file-loader, we'll get a path to the resource +declare module "*.png" { + const value: string; + export default value; +} diff --git a/test/__mocks__/fileMock.js b/test/__mocks__/fileMock.js new file mode 100644 index 000000000..86059f362 --- /dev/null +++ b/test/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub'; diff --git a/test/__mocks__/styleMock.js b/test/__mocks__/styleMock.js new file mode 100644 index 000000000..e69de29bb diff --git a/webpack.config.js b/webpack.config.js index 2b72bb10e..4a62292dd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -156,6 +156,14 @@ module.exports = (env, argv) => { test: /\.s?css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, + { + test: /\.(png|jpe?g|gif|jp2|webp)$/, + loader: 'file-loader', + options: { + name: '[contenthash].[ext]', + outputPath: 'dist/images', + }, + }, ], }, optimization: {