Javascript 检索用于酶单元测试的组件的材料UI CreateShalf失败
我正在尝试用MaterialUI上的酵素实现一个简单的单元测试,在MuiThemeProvider中有一个组件。为了测试基本版本,我从中选取了示例,但是每当我运行Javascript 检索用于酶单元测试的组件的材料UI CreateShalf失败,javascript,reactjs,jestjs,material-ui,enzyme,Javascript,Reactjs,Jestjs,Material Ui,Enzyme,我正在尝试用MaterialUI上的酵素实现一个简单的单元测试,在MuiThemeProvider中有一个组件。为了测试基本版本,我从中选取了示例,但是每当我运行npm测试时,我都会得到下面的错误 关于如何从MuiThemeProvider中检索组件,以便稍后在潜水和单元测试中使用,有什么建议吗 Cannot find module 'react' from 'MuiThemeProvider.js' However, Jest was able to find:
npm测试时,我都会得到下面的错误
关于如何从MuiThemeProvider中检索组件,以便稍后在潜水和单元测试中使用,有什么建议吗
Cannot find module 'react' from 'MuiThemeProvider.js'
However, Jest was able to find:
'./MuiThemeProvider.d.ts'
'./MuiThemeProvider.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string
at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (../../../node_modules/@material-ui/core/styles/MuiThemeProvider.js:26:37)
我的设置在test/setupTests.js
中定义如下:
import React from 'react'
import Enzyme, { shallow, render, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() })
// Make Enzyme functions available in all test files without importing
global.React = React
global.shallow = shallow
global.render = render
global.mount = mount
我发现问题可能与babel有关,因此在项目中配置了.babelrc
,如下所示:
{
"env": {
"test": {
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
},
"presets": ["@babel/preset-react"]
}
mypackage.json中的关键部分是
"dependencies": {
"enzyme": "~3.10.0",
"enzyme-adapter-react-16": "~1.14.0",
"material-ui": "~0.20.2",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-icons": "~3.7.0",
"react-scripts": "~3.1.1",
"react-test-renderer": "~16.9.0",
"react-validation-framework": "^5.1.0"
},
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "~1.7.0",
"enzyme-to-json": "^3.4.0"
}
"dependencies": {
"enzyme": "~3.10.0",
"enzyme-adapter-react-16": "~1.14.0",
"material-ui": "~0.20.2",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-icons": "~3.7.0",
"react-scripts": "~3.1.1",
"react-test-renderer": "~16.9.0",
"react-validation-framework": "^5.1.0"
},
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "~1.7.0",
"enzyme-to-json": "^3.4.0"
}