用React，Typescript和ES6进行Jest测试 [英] Jest testing with React, Typescript and ES6

问题描述

我有一些问题，测试使用以ES6编写的Jest（v16.0.1）测试用Typescript（v2.0.3）编写的React组件。 m使用ts-jest（v0.1.8）预处理器，我的package.json的相关部分看起来像

 jest ：{
scriptPreprocessor：< rootDir> /node_modules/ts-jest/preprocessor.js，
testRegex：（/__tests__/.*|\\.(test | | | 
ts，
tsx，
js 

} 
  

但是当我运行测试我得到： / p>

  FAIL应用程序/组件/ __测试__ / TestTotalNumberOfTeapots.js 
●测试套件无法运行
 
 /Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1 
（{Object。< anonymous>：function（module，exports，require，__ dirname，__ filename，global， jest）{import反应的反应; 
 ^^^^^ 
 SyntaxError：意外的令牌导入
 
在transformAndBuildScript（node_modules / jest-runtime / build / transform.js：284：10）
 
测试套件：1失败，1总共
测试：0总计
快照：0总计
时间：0.673s 
所有测试套件。 
  

我的测试看起来像

  import反应的反应; 
 import来自'../TotalNumberOfTeapots.tsx'的TotalNumberOfTeapots; 
来自'react-test-renderer'的import renderer; 
 
它（'正确渲染'，（）=> {
 const tree = renderer.create（
< TotalNumberOfTeapots numberOfTeapots ='1'/> 
）.toJSON（）; 
 expect（tree）.toMatchSnapshot（）; 
}）; 
  

我想我需要一个设置，我的组件从Typescript到ES5使用ts-jest在Jest读取之前，我的测试从ES6到ES5都是透露出来的，但我不知道怎么样？

解决方案

管理这个工作，需要编写自己的预处理器：

  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，
 }，
路径，
 [] 
）; 
} 
 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] 
}，
  

I'm having some issues testing a React component written in Typescript(v2.0.3) with Jest(v16.0.1) tests written in ES6.

I'm using the ts-jest(v0.1.8) preprocessor and the relevant part of my package.json looks like

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

But when I run the tests I get:

 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.

My test looks like

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();
});

I assume I need to have a setup where my components are transpiled from Typescript to ES5 using ts-jest and my tests are transpiled from ES6 to ES5 using babel-jest before Jest reads them but I'm not sure how?

解决方案

Managed to work this out, needed to write my own preprocessor:

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;
  },
};

And update my package.json to have:

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

这篇关于用React，Typescript和ES6进行Jest测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！