SyntaxError: Unexpected token import with Jest
SyntaxError: Unexpected token import with Jest
我正在尝试在我的 react-native 项目中使用 redux-persist 设置一个有趣的快照测试。我不认为它是 es2015 导入问题,因为我的测试代码看起来像这样:
import React from "react"
import "react-native"
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer"
import App from "../App"
it("renders correctly", () => {
const app = renderer.create(<App />).toJSON()
expect(app).toMatchSnapshot()
})
我 运行 在我添加 redux-persist
之前进行了完全相同的测试并且它正在运行。
玩笑抛出的错误:
● 测试套件未能 运行
/Users/a_050313/Documents/dev/scheduling/node_modules/redux-persist/es/integration/react.js:9
import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
^^^^^^
SyntaxError: Unexpected token import
1 | import React, { Component } from "react"
2 | import { Provider } from "react-redux"
> 3 | import { PersistGate } from "redux-persist/es/integration/react"
4 |
5 | import "./__debug__/ReactotronConfig" // Run Reactron Tools config
6 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (App.js:3:13)
at Object.<anonymous> (__tests__/App.js:7:10)`
错误与 es2015
导入有关,但这是开玩笑的。默认情况下,jest 只转译项目代码和 react-native
代码。因此,添加的尚未转译的库会开玩笑地出错。
(如开玩笑文档中所述)
By default the jest-react-native preset only processes the project's own source files and react-native
官方文档中提供的 Solution 似乎有点 hacky 但这是我唯一发现的东西:
在 package.json
jest: { }
部分或 jest.config.js
文件中添加以下内容。
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist)/)"
]
其中位 redux-persist
是解决问题的东西。如果您对其他库有疑问,只需添加它们的名称即可。我的列表看起来像这样:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist|react-native-linear-gradient|react-native-vector-icons|react-navigation)/)"
]
}
如果您从
导入 PersistGate
,则仅针对 redux-persist
的附加说明
import { PersistGate } from "redux-persist/lib/integration/react"
改为
import { PersistGate } from "redux-persist/es/integration/react"
您将获得编译版本,但对于其他库,您仍然需要上述解决方案。
我正在尝试在我的 react-native 项目中使用 redux-persist 设置一个有趣的快照测试。我不认为它是 es2015 导入问题,因为我的测试代码看起来像这样:
import React from "react"
import "react-native"
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer"
import App from "../App"
it("renders correctly", () => {
const app = renderer.create(<App />).toJSON()
expect(app).toMatchSnapshot()
})
我 运行 在我添加 redux-persist
之前进行了完全相同的测试并且它正在运行。
玩笑抛出的错误:
● 测试套件未能 运行
/Users/a_050313/Documents/dev/scheduling/node_modules/redux-persist/es/integration/react.js:9
import React, { PureComponent } from 'react'; // eslint-disable-line import/no-unresolved
^^^^^^
SyntaxError: Unexpected token import
1 | import React, { Component } from "react"
2 | import { Provider } from "react-redux"
> 3 | import { PersistGate } from "redux-persist/es/integration/react"
4 |
5 | import "./__debug__/ReactotronConfig" // Run Reactron Tools config
6 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (App.js:3:13)
at Object.<anonymous> (__tests__/App.js:7:10)`
错误与 es2015
导入有关,但这是开玩笑的。默认情况下,jest 只转译项目代码和 react-native
代码。因此,添加的尚未转译的库会开玩笑地出错。
(如开玩笑文档中所述)
官方文档中提供的By default the jest-react-native preset only processes the project's own source files and react-native
Solution 似乎有点 hacky 但这是我唯一发现的东西:
在 package.json
jest: { }
部分或 jest.config.js
文件中添加以下内容。
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist)/)"
]
其中位 redux-persist
是解决问题的东西。如果您对其他库有疑问,只需添加它们的名称即可。我的列表看起来像这样:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|redux-persist|react-native-linear-gradient|react-native-vector-icons|react-navigation)/)"
]
}
如果您从
导入PersistGate
,则仅针对 redux-persist
的附加说明
import { PersistGate } from "redux-persist/lib/integration/react"
改为
import { PersistGate } from "redux-persist/es/integration/react"
您将获得编译版本,但对于其他库,您仍然需要上述解决方案。