5

所以最近,我从 React 15.4.2 迁移到了 React 16.0.0。这是我在项目中的当前版本:

{  
    "jest":{  
        "verbose":true,
        "automock":false,
        "testRegex":"\\.test\\.js$",
        "moduleNameMapper":{  
            "config":"<rootDir>/src/config/test.js",
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"<rootDir>/src/__tests__/__mocks__/fileMock.js",
            "\\.(css|less|scss)$":"<rootDir>/src/__tests__/__mocks__/styleMock.js",
            "\\Api.(js)$":"<rootDir>/src/__tests__/__mocks__/apiMock.js"
        },
        "coveragePathIgnorePatterns":[  
            "<rootDir>/src/utils/svgVisualization.js"
        ],
        "unmockedModulePathPatterns":[  
            "react"
        ],
        "moduleFileExtensions":[  
            "js",
            "json"
        ],
        "modulePathIgnorePatterns":[  
            "/node_modules/"
        ],
        "testPathIgnorePatterns":[  
            "/node_modules/"
        ],
        "setupFiles":[  
            "<rootDir>/src/__tests__/__mocks__/storageMock.js"
        ]
    },
    "main":"src/index.js",
    "scripts":{  
        "clean":"rimraf dist/*",
        "copy":"copyfiles -f ./src/index.html ./dist",
        "dist":"npm run clean && npm run copy && webpack --progress --bail --env dist -p",
        "dev":"npm run clean && npm run copy && webpack --progress --bail --env dev -p",
        "lint":"esw webpack.config.* src tools --color",
        "lint:watch":"npm run lint -- --watch",
        "release:major":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
        "release:minor":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
        "release:patch":"npm version prerelease && git push --follow-tags && npm publish --tag beta",
        "serve:dev":"webpack-dev-server --open --env dev",
        "serve:dist":"webpack-dev-server --open --env dist -p --progress",
        "open:src":"npm run serve:dev",
        "start":"npm-run-all --parallel open:src lint:watch",
        "test":"jest --coverage"
    },
    "devDependencies":{  
        "babel-core":"^6.7.6",
        "babel-eslint":"^7.1.0",
        "babel-jest":"^20.0.3",
        "babel-loader":"^6.2.4",
        "babel-plugin-istanbul":"^3.0.0",
        "babel-plugin-transform-class-properties":"^6.24.1",
        "babel-plugin-transform-decorators-legacy":"^1.3.4",
        "babel-plugin-transform-object-rest-spread":"^6.8.0",
        "babel-polyfill":"^6.9.0",
        "babel-preset-airbnb":"^2.0.0",
        "babel-preset-es2015":"^6.24.1",
        "babel-preset-es2015-native-modules":"^6.6.0",
        "babel-preset-react":"^6.24.1",
        "chai":"^4.1.2",
        "copyfiles":"^1.0.0",
        "css-loader":"^0.28.7",
        "enzyme":"^3.1.0",
        "enzyme-adapter-react-16":"^1.0.1",
        "eslint":"^4.1.1",
        "eslint-config-airbnb":"^15.1.0",
        "eslint-loader":"^1.3.0",
        "eslint-plugin-import":"^2.2.0",
        "eslint-plugin-jsx-a11y":"^5.1.1",
        "eslint-plugin-react":"^7.1.0",
        "file-loader":"^1.1.4",
        "jest":"^21.2.1",
        "jest-enzyme":"^4.0.0",
        "karma":"^1.0.0",
        "karma-chai":"^0.1.0",
        "karma-chrome-launcher":"^2.1.1",
        "karma-coverage":"^1.0.0",
        "karma-junit-reporter":"^1.0.0",
        "karma-mocha":"^1.0.1",
        "karma-mocha-reporter":"^2.0.3",
        "karma-phantomjs-launcher":"^1.0.0",
        "karma-sinon":"^1.0.5",
        "karma-sourcemap-loader":"^0.3.7",
        "karma-webpack":"^2.0.4",
        "mocha":"^3.0.0",
        "node-sass":"^4.5.3",
        "npm-run-all":"^4.0.2",
        "null-loader":"^0.1.1",
        "phantomjs-prebuilt":"^2.1.7",
        "postcss":"^6.0.12",
        "postcss-loader":"^2.0.6",
        "react-addons-test-utils":"^15.0.1",
        "react-test-renderer":"^16.0.0",
        "rimraf":"^2.5.2",
        "sass-loader":"^6.0.6",
        "sinon":"^4.0.0",
        "style-loader":"^0.18.2",
        "url-loader":"^0.5.7",
        "webpack":"^3.6.0",
        "webpack-bundle-size-analyzer":"^2.7.0",
        "webpack-dev-server":"^2.1.0-beta"
    },
    "dependencies":{  
        "@types/react":"^16.0.2",
        "babel-plugin-import":"^1.2.1",
        "babel-polyfill":"^6.23.0",
        "cross-env":"^5.0.5",
        "es6-tween":"^3.3.0",
        "eslint-watch":"^3.0.0",
        "image-webpack-loader":"^3.2.0",
        "immutable":"^3.8.1",
        "jwt-decode":"^2.1.0",
        "lodash":"^4.17.4",
        "material-ui":"0.19.3",
        "moment":"^2.18.1",
        "nock":"^9.0.13",
        "prop-types":"^15.5.8",
        "react":"^16.0.0",
        "react-addons-css-transition-group":"^15.4.2",
        "react-addons-shallow-compare":"^15.5.2",
        "react-bootstrap":"^0.31.3",
        "react-breadcrumbs":"^1.5.2",
        "react-dnd":"^2.4.0",
        "react-dnd-html5-backend":"^2.4.1",
        "react-dom":"^16.0.0",
        "react-ga":"^2.2.0",
        "react-helmet":"^5.0.0-beta",
        "react-hot-loader":"^3.0.0-beta.6",
        "react-redux":"^5.0.3",
        "react-router":"^3.0.0",
        "react-tap-event-plugin":"^3.0.2",
        "react-tooltip":"^3.3.0",
        "reactour":"^1.0.1",
        "redux":"^3.6.0",
        "redux-form":"^7.0.4",
        "redux-logger":"^3.0.6",
        "redux-mock-store":"^1.2.3",
        "redux-thunk":"^2.2.0",
        "styled-components":"^2.1.1",
        "superagent":"^3.5.0",
        "svg.js":"^2.6.2",
        "three":"^0.87.1",
        "throttle-debounce":"^1.0.1",
        "universal-cookie":"^2.0.8",
        "webpack":"^3.6.0",
        "whatwg-fetch":"^2.0.2"
    }
}

随着 React,我迁移到 Enzyme 3.6.0 并开始使用enzyme-adapter-react,所以在我的测试入口文件中(src/config.test.js)我这样做了:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

当我尝试像往常一样运行测试时jest,我得到了标题中的错误。

另外,如果我尝试使用jest-enzyme并将其添加到我的笑话配置中:

"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js", 

我得到另一个错误:

TypeError:超级表达式必须为 null 或函数,而不是未定义。

所以我有点卡住了,无论我尝试什么,我都无法让我的测试工作。任何帮助表示赞赏。

4

3 回答 3

14

我遇到了同样的错误。我发现我的错误是。

import shallow from 'enzyme';

我把它改成

import {shallow} from 'enzyme';
于 2018-07-28T12:29:15.160 回答
4

对我有帮助的是:将别名从“config”重命名为其他名称,例如“my-config”。在 moduleNameMapper:{ "my-config":"/src/config/test.js" ...}

当然还可以更改 js 代码中的导入。并且应该工作。

它必须在酶或其他依赖项中存在一些名称冲突。

于 2017-11-08T21:10:35.727 回答
2

也遇到了这个。在我的情况下,问题是一个错误的设置,它将名称包含子字符串的任何模块重定向configuration到我的本地环境特定配置。

在我的具体情况下,使用 Jest,修复是更改 jestmoduleNameWrapper设置,package.json以便重定向到我的配置的键^config$不仅仅是config.

于 2017-11-28T20:48:40.660 回答