- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 TypeScript 开发 Next.js 项目,为了测试我使用 Jest 和 React 测试库。但是,我遇到了 语法错误:无法在模块外使用 import 语句 对于我导入的组件重新炒作 .
据我了解,Jest 不支持 ES6,因此 node_modules 可能需要进行转换。这可以使用 transformIgnorePatterns
进行配置.例如,如果 rehype-raw
使用 "transformIgnorePatterns": ["node_modules/(?!rehype-raw)/"]
导致此错误应该允许转换 rehype-raw
但没有其他模块。从而解决这个错误。
但是,这对我不起作用。但是我知道为什么以及如何解决这个问题。我发现没有建议的解决方案可以解决这个问题。我已附上我的 错误输出 , jest.config.js 和 babel.rc 下面的文件。
错误输出
FAIL test/pages/companies/[id].test.tsx
● Test suite failed to run
Jest encountered an unexpected token
[...]
Details:
/path/frontend-job/node_modules/rehype-raw/index.js:7
import {raw} from 'hast-util-raw'
^^^^^^
SyntaxError: Cannot use import statement outside a module
3 | import Image from 'next/image';
4 | import { Remark } from 'react-remark';
> 5 | import rehypeRaw from 'rehype-raw';
| ^
6 | import rehypeSanitize from 'rehype-sanitize';
7 | import { logError } from '@utils/logger';
8 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
at Object.<anonymous> (components/markdown/JobMarkdown.tsx:5:1)
jest.config.js
const { resolve } = require('path');
module.exports = {
roots: ['<rootDir>'],
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
setupFiles: ['<rootDir>/test/setup.js'],
testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
transform: {
'^.+\\.(ts|tsx)$': 'babel-jest',
},
transformIgnorePatterns: [
'node_modules/(?!rehype-raw)/',
],
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
moduleNameMapper: {
// Force mocks: https://github.com/facebook/jest/issues/4262
'@api/axios': '<rootDir>/test/__mocks__/axios.js',
// Normal module aliases
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
'^@test/(.*)$': resolve(__dirname, './test/$1'),
'^@test/faker/(.*)$': resolve(__dirname, './test/faker/$1'),
'^@components/(.*)$': resolve(__dirname, './components/$1'),
'^@pages/(.*)$': resolve(__dirname, './pages/$1'),
'^@utils/(.*)$': resolve(__dirname, './utils/$1'),
'^@api/(.*)$': resolve(__dirname, './api/$1'),
'^@store/(.*)$': resolve(__dirname, './store/$1'),
},
testEnvironment: 'jsdom',
};
babel.rc
{
"presets": ["next/babel"]
}
最佳答案
Next 已经对 Jest 提供了开箱即用的支持,我建议您按照步骤 provided in the docs .
关于javascript - Next.js 和 Jest : SyntaxError: Cannot use import statement outside a module,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70916761/
在 go lang 中使用“If with a short statement”有什么好处。引用:go tour if v := math.Pow(x, n); v < lim { retur
完全错误: Warning: Unsafe statement written to the binary log using statement format since BINLOG_FORMAT
完全错误: Warning: Unsafe statement written to the binary log using statement format since BINLOG_FORMAT
我有三个存储过程 Sp1、Sp2 和 Sp3。 第一个 (Sp1) 将执行第二个 (Sp2) 并将返回的数据保存到 @tempTB1 中,第二个将执行第三个 (Sp3) 并将数据保存到 @tempTB
我已将 FLAG 设置为 1,并且正在执行 ARG 值应该仅为 DEV。但是我得到的是 ARG= DEV + CLIENTID 000023 // FLAG=1 000026 // I
我已将 FLAG 设置为 1,并且正在执行 ARG 值应该仅为 DEV。但是我得到的是 ARG= DEV + CLIENTID 000023 // FLAG=1 000026 // I
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
PMD告诉我 A switch with less than 3 branches is inefficient, use a if statement instead. 这是为什么呢?为什么是3?他
我刚开始学习 Racket,所以我仍在努力弄清楚这门语言的复杂性。我正在尝试在列表中实现我自己的搜索功能。如果函数找到它,则返回索引,否则返回 -1。 (define (find-index list
在 Kotlin 中,您可以使用类似于三元运算符的 if 语句。 我们可以选择做这样的事情: val x = if (isOdd) 1 else 2 但是如果我们有多个变量需要根据某些条件进行设置,那
在我的 Android 应用程序中,我尝试使用 XMLPullParser 使用以下代码读取 xml 文件: while (eventType != XmlPullParser.END_DOCUMEN
这个问题已经有答案了: Boolean expressions in Java (8 个回答) 已关闭 7 年前。 我遇到过一些情况,其中第一个似乎改变了 boolean 值,而第二个却没有!两者之间
我基本上想做的是: select * from request where id = 1 and created_at like (today's date); 但使用 Eloquent 。 我试过:
我不确定为什么会收到此代码。基本上我希望能够动态定位我的发射器,但是当我添加一个选项来检查位置并根据需要进行纠正时,我不断收到此错误。 添加的代码是 if (
何时使用语句而不是准备语句。我想语句用于没有参数的查询,但为什么不使用准备好的语句呢?对于没有参数的查询,哪个更快。 最佳答案 I suppose statement is used in queri
我必须创建一个表,如下所示 借款人(客户编号,贷款编号) 如果客户没有超过 3 笔贷款,则可以贷款。 我创建的表如下 create table borrower( customerno int(5),
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicates: Is "else if" faster than "switch() case"? What is the
typescript 版本 2.2.2 我在我的 UserRoutzr.ts 中写了这个要求 const users = require(path.join(process.cwd() + "/da
我有一个用 JPQL 编写的应用程序,它可以命中非常不同的查询(在不同的资源上)。 对于很多此类查询,我需要知道结果总数(计数),因为我没有应用任何 LIMIT/OFFSET 由于此查询的性质非常不同
我对以下 Java 语句感到困惑: ArtClass artClass0 = new ArtClass(); int int3 = 73; boolean boolean0 = artClass0.f
我是一名优秀的程序员,十分优秀!