使用 React、Typescript 和 ES6 进行 Jest 测试

Posted 2023-02-22

【中文标题】使用 React、Typescript 和 ES6 进行 Jest 测试

【英文标题】：Jest testing with React, Typescript and ES6

【发布时间】：2017-02-25 11:05:19

【问题描述】：

我在使用 ES6 编写的 Jest(v16.0.1) 测试用 Typescript(v2.0.3) 编写的 React 组件时遇到了一些问题。

我正在使用 ts-jest(v0.1.8) 预处理器，我的 package.json 的相关部分看起来像

  "jest": 
    "scriptPreprocessor": "<rootDir>/node_modules/ts-jest/preprocessor.js",
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ]
   

但是当我运行测试时，我得到：

 FAIL  app/components/__tests__/TestTotalNumberOfTeapots.js
  ● Test suite failed to run

    /Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
    ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import React from 'react';
                                                                                             ^^^^^^
    SyntaxError: Unexpected token import

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.673s
Ran all test suites.

我的测试看起来像

import React from 'react';
import TotalNumberOfTeapots from '../TotalNumberOfTeapots.tsx';
import renderer from 'react-test-renderer';

it('renders correctly', () => 
  const tree = renderer.create(
    <TotalNumberOfTeapots numberOfTeapots='1' />
  ).toJSON();
  expect(tree).toMatchSnapshot();
);

我假设我需要有一个设置，其中我的组件使用 ts-jest 从 Typescript 转译到 ES5，我的测试在 Jest 读取它们之前使用 babel-jest 从 ES6 转译到 ES5，但我不确定如何？

【问题讨论】：

现在ts-jest 带有一个可以使用的预处理器。

【参考方案1】：

设法解决这个问题，需要编写我自己的预处理器：

const tsc = require('typescript');
const babelJest = require('babel-jest');

module.exports = 
  process(src, path) 
    if (path.endsWith('.ts') || path.endsWith('.tsx')) 
      return tsc.transpile(
        src,
        
          module: tsc.ModuleKind.CommonJS,
          jsx: tsc.JsxEmit.React,
        ,
        path,
        []
      );
    
    if (path.endsWith('.js') || path.endsWith('.jsx')) 
        return babelJest.process(src, path);
    
    return src;
  ,
;

并更新我的 package.json 以拥有：

  "jest": 
    "scriptPreprocessor": "preprocessor.js",
    "moduleFileExtensions": ["js", "jsx", "json", "ts", "tsx"]
  ,

【讨论】：

遇到“Not Found preprocessor.js”，改成"scriptPreprocessor": "./preprocessor.js"

@ObooChin 你必须在你的package.json 旁边创建preprocessor.js 文件