无法使用 react-testing-library 运行测试“无法在模块外使用 import 语句”错误
Posted
技术标签:
【中文标题】无法使用 react-testing-library 运行测试“无法在模块外使用 import 语句”错误【英文标题】：unable to run tests using react-testing-library "Cannot use import statement outside a module" error 【发布时间】：2022-01-02 21:39:52 【问题描述】：这是Sandbox。可以通过在控制台中输入npm run test -- -t "Store" 来触发该问题。将返回的错误是Cannot use import statement outside a module，因为编译时import React from "react"; 被添加到util\store.test.tsx，原因我不明白。
只有在使用来自react-testing-library的导入（和jsx）时才会遇到该错误
我已经尝试了here 列出的所有建议，但没有任何效果。
我的jest.config.ts 是；
export default
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
coverageProvider: "v8"
而babel.config.js 是；
module.exports =
presets: [
'next/babel',
['@babel/preset-env', targets: node: 'current'],
'@babel/preset-typescript'
]
;
鉴于我的项目中使用的特定库的交互，我认为这是一个有点独特的错误，这就是其他建议无法解决问题的原因。
【问题讨论】：
【参考方案1】：将JSX 模式更改为"jsx": "react" 为tsconfig.json。
添加ts-jest包
像这样修改jest.config.ts：
export default
preset: "ts-jest/presets/js-with-ts",
testEnvironment: "jsdom",
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
coverageProvider: "v8"
npm run test -- -t "Store"
测试结果：
sandbox@sse-sandbox-91opf:/sandbox$ npm run test -- -t "Store"
> music-quiz@0.1.0 test /sandbox
> jest "-t" "Store"
FAIL util/store.test.tsx (32.906 s)
● Store: › Should work
TestingLibraryElementError: Unable to find an accessible element with the role "h1"
Here are the accessible roles:
heading:
Name "":
<h1 />
--------------------------------------------------
Ignored nodes: comments, <script />, <style />
<body>
<div>
<h1 />
</div>
</body>
6 | it("Should work", () =>
7 | render(<h1></h1>);
> 8 | expect(screen.getAllByRole("h1")).toBeInTheDocument();
| ^
9 | );
10 | it("definitely work", () =>
11 | expect(true).toBe(true);
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:38:19)
at node_modules/@testing-library/dom/dist/query-helpers.js:90:38
at node_modules/@testing-library/dom/dist/query-helpers.js:130:15
at Object.<anonymous> (util/store.test.tsx:8:19)
----------|---------|----------|---------|---------|------------------------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|------------------------------------
All files | 36.17 | 100 | 0 | 36.17 |
maths.ts | 11.11 | 100 | 0 | 11.11 | 1-5,7-9
notes.ts | 37.87 | 100 | 0 | 37.87 | ...46,63-94,98-111,113-116,118-132
----------|---------|----------|---------|---------|------------------------------------
Test Suites: 1 failed, 2 skipped, 1 of 3 total
Tests: 1 failed, 30 skipped, 1 passed, 32 total
Snapshots: 0 total
Time: 37.472 s, estimated 49 s
Ran all test suites with tests matching "Store".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! music-quiz@0.1.0 test: `jest "-t" "Store"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the music-quiz@0.1.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sandbox/.npm/_logs/2021-11-25T04_42_32_701Z-debug.log
测试环境设置正确，但您的测试用例失败。
CodeSandbox
【讨论】：
你忘了提到我需要手动将 React 包含到每个文件中。这是太棒了。你能解释一下为什么会这样吗？ 其实这样不行，Next.js不允许你使用"jsx": "react"【参考方案2】：
由于未知原因，我的 babel.config.js 文件似乎有问题（原始问题中未提供，抱歉）
module.exports =
presets: [
'next/babel',
['@babel/preset-env', targets: node: 'current'],
'@babel/preset-typescript'
]
;
这最初是为了使Typescript 在Next.js 中工作，但不是必需的，并且正在破坏Jest。删除文件有效，但是，我已将其设置为；
module.exports =
"presets": [
"next/babel"
],
"plugins": []
preset-env 存在问题，因为删除该行专门修复了错误。
【讨论】：
以上是关于无法使用 react-testing-library 运行测试“无法在模块外使用 import 语句”错误的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 StorageClass 配置卷 - 无法获取存储帐户的存储密钥
Worklight Studio 和本地开发，有时无法使用 Java 类，有时无法使用 HTML 文件
Ubuntu 80端口无法使用-非root用户无法使用1024以下端口