React Jest - набор тестов не удалось запустить для файлов PNG даже после добавления mockFiles и identity-obj-proxy

Question

Я пытаюсь провести модульное тестирование моего компонента React, который импортирует другой компонент, содержащий файл .png. Из-за этого изображения мои тестовые костюмы не работают. Я попробовал все возможные решения с конфигурацией ниже, но все равно не повезло.

Пожалуйста, предложите, это моя конфигурация проекта.

Это мой jest.config. json

{
    "testRegex": "((\\.|/*.)(spec))\\.js?$"
}

Мой пакет. json

{
    "name": "Application name",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --config ./webpack.config.js --mode development",
        "test": "jest"
    },
    "jest": {
        "moduleNameMapper": {
            ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
        }
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.8.7",
        "@babel/polyfill": "^7.10.1",
        "@babel/preset-env": "^7.10.2",
        "@babel/preset-react": "^7.8.3",
        "axios-mock-adapter": "^1.18.1",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.5.3",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^18.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^2.5.0",
        "file-loader": "^6.0.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^26.0.1",
        "prettier": "^2.0.5",
        "react-hot-loader": "^4.12.19",
        "redux-mock-store": "^1.5.4",
        "style-loader": "^1.2.1",
        "url-loader": "^4.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
        "@material-ui/core": "^4.10.2",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.56",
        "axios": "^0.19.2",
        "core-js": "^3.6.5",
        "d3-sankey-diagram": "^0.7.3",
        "husky": "^4.2.5",
        "prop-types": "^15.7.2",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-google-charts": "^3.0.15",
        "react-intl": "^4.6.3",
        "react-redux": "^7.2.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-test-renderer": "^16.13.1",
        "redux": "^4.0.5",
        "redux-saga": "^1.1.3",
        "regenerator-runtime": "^0.13.5"
    }
}

Мой Webpack.config. js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: ['./src/index.js', '@babel/polyfill'],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.(jpe?g|gif|png|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/images/',
                        },
                    },
                ],
            },
        ],
        // loaders: [{ test: /\.jsx?$/, loader: 'babel' }],
    },
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devServer: {
        contentBase: './dist',
        hot: true,
    },
};

Мой .babelr c файл

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Наконец, мой тестовый файл:

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyPackage from '../Components/index';

Enzyme.configure({ adapter: new Adapter() });

describe('Some name', () => {
    it('This should be loaded', () => {
        const wrapper = shallow(<MyPackage />);
        const x= wrapper.find('#selector').debug();
        expect(x.prop('length')).toBe(1);
    });
});

Я попытался добавить mocks / fileMock. js с

export default '';

и mocks / styleMocks. js

module.exports = {};

все еще вижу эту ошибку -

 ● Test suite failed to run

    D:\ReactStuff\folder\myproject\src\assets\images\mylogo.png:1
    �PNG


    SyntaxError: Invalid or unexpected token

      1 | import React from 'react';
    > 2 | import { HeaderLogo} from '../assets/images/mylogo.png';
        | ^
      3 | 
      4 | const Header = () => {
      5 |     return (

Что мне здесь не хватает. Пожалуйста, предложите