最近,我从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并开始使用酶适配器反应,因此在我的测试条目(src / config.test.js)中我这样做了：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
当我尝试像往常一样使用jest运行测试时,我会收到标题中的错误.
此外,如果我尝试使用jest-enzyme并将其添加到我的jest配置中：
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
我收到另一个错误：
TypeError: Super expression must either be null or a function, not undefined.
所以我有点卡住,无论我尝试什么,我都无法让我的测试工作.任何帮助表示赞赏.
解决方法:
帮助我的是以下内容：将’config’中的别名重命名为其他内容,例如： “我-配置”.
在moduleNameMapper中：{“my-config”：“/ src / config / test.js”…}
当然还会更改js代码中的导入.应该工作.
它必须在酶或其他依赖性中具有一些名称冲突.