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 and jest测试

Jest 无法运行 .tsx 文件(CRA 2,酶)

react 学习网站

Vue JS with story hot config for storybook and jest error in Cannot find module '@storybook/vue/dist

从测试中自动生成文档(javascript、jest)