Jest and React and Typescript & React-Testing-Library 错误
Posted
技术标签:
【中文标题】Jest and React and Typescript & React-Testing-Library 错误【英文标题】:Jest & React & Typescript & React-Testing-Library error 【发布时间】:2020-02-10 10:05:41 【问题描述】:我有一个使用 Typescript 的 React/NextJS 项目设置,并正在使用 Jest 和 React 测试库添加单元测试。
我的组件的单元测试如下所示:
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import render from '@testing-library/react';
import AppLayout from '.';
describe('<AppLayout>', () =>
it('renders children', () =>
const children = 'Test';
const props = pathname: '/' ;
const component = <AppLayout ...props>children</AppLayout>;
const getByText = render(component);
expect(getByText(children)).toBeInTheDocument();
);
);
这会引发以下错误:
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".
以下是我项目中的一些关键文件:
.babelrc
"env":
"development":
"presets": ["next/babel"],
"plugins": ["babel-plugin-styled-components"]
,
"production":
"presets": ["next/babel"],
"plugins": [
"@babel/plugin-transform-react-inline-elements",
["babel-plugin-styled-components", "displayName": false ]
]
tsconfig.js
"compilerOptions":
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"isolatedModules": true,
"lib": [
"dom",
"es2017"
],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "esnext"
,
"exclude": [
".next",
"node_modules"
]
jest.config.js
module.exports =
roots: ['./'],
transform:
'^.+\\.tsx?$': 'ts-jest',
,
;
我的项目编译并运行良好,但我猜我需要修复一些配置问题才能让我的单元测试正常运行。有什么想法吗?
【问题讨论】:
【参考方案1】:这个jest.config.js
可以与 Typescript、Jest、React 测试库一起使用,并且不需要 Babel。
要测试它是否有效,请执行:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react/client
yarn && yarn test
虽然testEnvironment: 'jsdom'
是默认设置,所以并不需要,你可以看看其他设置。
顺便说一句,Babel 是一个wonderful 软件,但您可以考虑设置"target": "es5"
并改用react-app-polyfill。
【讨论】:
不确定我是否完全按照您的回答。我的项目使用 NextJS(它使用 babel)和 typescript(也内置在 NextJS 中)。 "如果 Jest 看到 Babel 配置,它将使用它来转换您的文件"。 Jest 应该使用ts-jest
进行转换。
好的,但是在我的 jest.config.js 中我有这行:'^.+\\.tsx?$': 'ts-jest',
。那不是告诉 Jest 使用 ts-jest 来转换 .ts 或 .tsx 文件吗?
是的,它告诉 Jest。我已经注意到了,这就是为什么我提出了 Babel 的问题。这似乎影响了 Jest 声明 Jest 将使用 Babel 来“转换你的文件”。看起来像一个问题,因此建议更换 Babel。我不知道你使用 NextJS。
好的。我不认为用 NextJS 替换 Babel 是一种选择。它内置在框架中。我确实提到我在我的问题中使用了 NextJS。以上是关于Jest and React and Typescript & React-Testing-Library 错误的主要内容,如果未能解决你的问题,请参考以下文章
单元测试 react redux thunk dispatches with jest and react testing library for "v: 16.13.1",
Vue JS with story hot config for storybook and jest error in Cannot find module '@storybook/vue/dist