Jest找不到模块

2022-04-08 00:00:00 reactjs javascript jsx enzyme

您好,我正在尝试使用Jest,但它一直给出无法找到模块的错误。我不确定这是否与文件的路径有关。下面的所有文件都位于我的src文件夹之外。我已在下面设置了我的文件。

jest.config.js文件:

module.exports = {
    "collectCoverage": true,
    "coverageDirectory": "coverage",
    "verbose": true,
    "roots": [
        "./__tests__"
    ],
    "transform": {
        "^.+\.js?$": "babel-jest"
    },
    "coverageThreshold": {
        "global": {
            "branches": 78,
            "functions": 90,
            "lines": 90,
            "statements": 90
        }
    },
    "setupFiles": [
        "./setupTest"
    ],
    "moduleDirectories": ["node_modules", "src"]
}

我的测试文件位于__test__:

import React from 'react';
import { shallow, mount } from 'enzyme';
import Routes, { OrderScreen, ShippingScreen, HomeScreen } from ../../src/App';
import {
    MemoryRouter
} from 'react-router'
import { Route } from 'react-router-dom';

let pathMap = {};
describe('App', () => {
    beforeAll(() => {
        const component = shallow(<Routes />);
        pathMap = component.find(Route).reduce((pathMap, route) => {
            const routeProps = route.props();
            pathMap[routeProps.path] = routeProps.component;
            return pathMap;
        }, {});
        console.log(pathMap)
    })
    it('should show Home component for / router (getting array of routes)', () => {

        expect(pathMap['/']).toBe(HomeScreen);
    })
    it('should show News Feed component for /news router', () => {
        expect(pathMap['/order/:id']).toBe(OrderScreen);
    })
    it('should show News Feed component techdomain for /news router', () => {
        expect(pathMap['/shipping']).toBe(ShippingScreen);
    })
    it('should show No match component for route not defined', () => {
        expect(pathMap['/search/:keyword/page/:pageNumber']).toBe(HomeScreen);
    })

})

打包Jason

{
    "name": "frontend",
    "proxy": "http://127.0.0.1:5000",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/plugin-transform-react-jsx": "^7.12.17",
        "@testing-library/user-event": "^12.1.10",
        "axios": "^0.21.1",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "react": "^17.0.1",
        "react-bootstrap": "^1.4.3",
        "react-redux": "^7.2.2",
        "react-router-bootstrap": "^0.25.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "react-side-effect": "^2.1.1",
        "redux": "^4.0.5",
        "redux-devtools-extension": "^2.13.8",
        "redux-thunk": "^2.3.0",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test:t": "react-scripts test",
        "eject": "react-scripts eject",
        "test": "jest",
        "test:cover": "jest --coverage",
        "open:coverage": "open ./coverage/lcov-report/index.html"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/core": "^7.13.8",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/preset-env": "^7.13.8",
        "@babel/preset-react": "^7.12.13",
        "@testing-library/jest-dom": "^5.11.9",
        "@testing-library/react": "^11.2.5",
        "babel-jest": "^26.6.3",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.6",
        "jest": "^26.6.3",
        "jest-enzyme": "^7.1.2",
        "react-dom": "^17.0.1"
    }
}

Babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        ['@babel/preset-react', { targets: { node: 'current' } }] // add this
    ]
};

一切看起来都很好我一直在学习教程,但我无法克服无法找到模块的错误它发生在我的测试文件中的此行

> 4 | import App, { App as AppComponent } from '../../src/App';

这是否与需要修复的路径有关?所有内容都位于我的src文件夹之外。我正在尝试测试的主文件App.js在我的src文件夹中。


解决方案

试试:

module.exports = {
  "collectCoverage": true,
  "coverageDirectory": "coverage",
  "verbose": true,
  "roots": ["<rootDir>/__tests__/"], // or "<rootDir>/src/__tests__/"
  "transform": {"^.+\.js?$": "babel-jest"},
  "coverageThreshold": {
    "global": {
      "branches": 78,
      "functions": 90,
      "lines": 90,
      "statements": 90
    }
  },
  "setupFiles": ["<rootDir>/setupTest"],
  "moduleNameMapper": {
    "^src/(.*)": "<rootDir>/src/$1",
  }
}

相关文章