reactjs - 测试套装因“SyntaxError: Unexpected token 'export”' react typescript using jest 失败
问题描述
我在我的 react-typescript 项目中设置了 jest 和酶。在这个项目中,我没有使用 babel。
我试图运行基本组件并且它运行良好。
之后我添加了另一个组件,并在这个组件中添加了我们自定义的基于 react-typescript 的库(cc-react-common-lib)。
当我包含 cc-react-common-lib 时,jest 会抛出以下错误
SyntaxError:意外的令牌“导出”
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/home/convertcart/projects/intelli-blocks/node_modules/cc-react-common-lib/lib/index.js:1
export { default as TableSpaced } from './general/table-spaced';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | /* eslint-disable jsx-a11y/control-has-associated-label */
2 | import React, { useState, useEffect } from 'react';
> 3 | import {
| ^
4 | TextField,
5 | useAjaxForm,
6 | Spacer,
我尝试在过去 1 周解决此错误,但我找不到任何解决方案
jest.config.js:
module.exports = {
// The root of your source code, typically /src
// `<rootDir>` is a token Jest substitutes
roots: ['<rootDir>'],
// Jest transformations -- this adds support for TypeScript
// using ts-jest
// transform: {
// "^.+\\.tsx?$": "ts-jest"
// },
preset: 'ts-jest',
// maxConcurrency:30,
// Runs special logic, such as cleaning up components
// when using React Testing Library and adds special
// extended assertions to Jest
// setupFilesAfterEnv: [
// "@testing-library/react/cleanup-after-each",
// "@testing-library/jest-dom/extend-expect"
// ],
// Test spec file resolution pattern
// Matches parent folder `__tests__` and filename
// should contain `test` or `spec`.
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
// Module file extensions for importing
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
snapshotSerializers: ['enzyme-to-json/serializer'],
setupFilesAfterEnv: ['<rootDir>/setupEnzyme.ts'],
};
setupEnzyme.js:
/* eslint-disable import/no-extraneous-dependencies */
import Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new ReactSixteenAdapter() });
更新: 当我在 jest.confi.js 文件中添加以下行时
transform: {
'^.+\\.tsx?$': 'babel-jest',
},
出现以下错误消息:
● Test suite failed to run
SyntaxError: /home/convertcart/projects/intelli-blocks/client/__tests__/editblock.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (8:29):
6 | console.log("Edit block test");
7 | it('Renders and Simulates Click Event ', () => {
> 8 | const Wrapper = shallow(<EditBlock />);
| ^
9 | const checkbox = () => Wrapper.find({ type: 'checkbox' });
10 | expect(checkbox().props().checked).toBe(false);
11 | checkbox().simulate('change', { target: { checked: true } });
Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (../node_modules/@babel/parser/src/parser/error.js:60:45)
at Parser.raiseWithData
解决方案
如果您通过代码编辑器插件运行测试,请尝试在编辑器中配置插件测试命令,以确保插件执行正确的命令。
例如,我正在使用 vscode、jestrunner 插件和 yarn 包管理器。所以我在我的工作区 settings.json 文件中包含了以下行:
{
"jestrunner.jestCommand": "yarn react-scripts test"
}
同样的错误得到了解决。希望这对你有用 :)
推荐阅读
- javascript - DOM 中的 hasAttribute 无法正常工作
- spring-mvc - 如何正确设置休眠验证器 6.0.10.Final
- c# - 如何在运行时更改 asp.net core 中的启动数据?
- c - libPAPI:最大同时事件度量
- java - Maven中的依赖地狱
- laravel - Laravel 条件雄辩查询
- amazon-s3 - 使用存储在 s3 中的 parquet 文件在 Greenplum 中创建外部表
- javascript - 循环查询选择器,未定义的内部循环
- arrays - 将 traceroute IP 与数组值进行比较
- android - 如何在 BookmarkActivity 上添加 Toast.makeText