使用带有Typescript的Jest+；预演

在测试中将JSX转换为

h（）

时出现问题。所有配置文件与创建react应用程序类似，排除对

TypeScript

和

preact

我通过TypeScript项目的

create react app my app--script=react scripts ts

-创建应用程序。然后执行弹出操作并将

react

更改为

preact

（不要使用

preact compat

）

为了迁移到

preact

我将添加到

package.json

到

babel.plugins部分

新插件

[“babel-plugin-transform-react-jsx”，{pragma:h}]

-用于将

转换为

h（jsx）

函数调用，而不是默认的

react.createElement（jsx）

（迁移指南）

这个很好用

但是这个测试有一个不同的transpiling配置：它可以传输到React.createElement（JSX）。在测试中，我得到一个错误

ReferenceError:React未在对象上定义。（src/Linkify/Linkify.test.tsx:39:21）

。如果我手动将测试和测试文件中的

更改为

h（SomeComponent）

，它会工作

如何将

转换为

h（JSX）

进行测试

// typescriptTransform.js
// Copyright 2004-present Facebook. All Rights Reserved.

'use strict';

const fs = require('fs');
const crypto = require('crypto');
const tsc = require('typescript');
const tsconfigPath = require('app-root-path').resolve('/tsconfig.json');
const THIS_FILE = fs.readFileSync(__filename);

let compilerConfig = {
  module: tsc.ModuleKind.CommonJS,
  jsx: tsc.JsxEmit.React,
};

if (fs.existsSync(tsconfigPath)) {
  try {
    const tsconfig = tsc.readConfigFile(tsconfigPath).config;

    if (tsconfig && tsconfig.compilerOptions) {
      compilerConfig = tsconfig.compilerOptions;
    }
  } catch (e) {
    /* Do nothing - default is set */
  }
}

module.exports = {
  process(src, path, config, options) {
    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
      let compilerOptions = compilerConfig;
      if (options.instrument) {
        // inline source with source map for remapping coverage
        compilerOptions = Object.assign({}, compilerConfig);
        delete compilerOptions.sourceMap;
        compilerOptions.inlineSourceMap = true;
        compilerOptions.inlineSources = true;
        // fix broken paths in coverage report if `.outDir` is set
        delete compilerOptions.outDir;
      }

      const tsTranspiled = tsc.transpileModule(src, {
        compilerOptions: compilerOptions,
        fileName: path,
      });
      return tsTranspiled.outputText;
    }
    return src;
  },
  getCacheKey(fileData, filePath, configStr, options) {
    return crypto
      .createHash('md5')
      .update(THIS_FILE)
      .update('\0', 'utf8')
      .update(fileData)
      .update('\0', 'utf8')
      .update(filePath)
      .update('\0', 'utf8')
      .update(configStr)
      .update('\0', 'utf8')
      .update(JSON.stringify(compilerConfig))
      .update('\0', 'utf8')
      .update(options.instrument ? 'instrument' : '')
      .digest('hex');
  },
};

测试样本：

import { h, render } from 'preact';
import Linkify from './Linkify';

it('renders without crashing', () => {
  const div = document.createElement('div');
  render(<Linkify children={'text'} />, div);
});

从'preact'导入{h，render}；
从“/Linkify”导入Linkify；
它（'渲染而不崩溃'，（）=>{
const div=document.createElement（'div'）；
渲染（，div）；
});

我找到了解决方案

我在

babel.plugins

一节

newplugin[“babel-plugin-transform-react-jsx”{pragma:“h”}]中出错了

-它没有使用。实际上，这个pragma使用的是来自

tsconfig.json

-

“jsxFactory”：“h”

但是，此指令不在

typescriptTransform.js

中使用

我正在扩展编译器选项

let compilerConfig = {
  module: tsc.ModuleKind.CommonJS,
  jsx: tsc.JsxEmit.React,
  jsxFactory: "h" // <-- duplicate option in jest transform config file
};

让编译器配置={
模块：tsc.ModuleKind.CommonJS，
jsx:tsc.JsxEmit.React，
jsxFactory：“h”//Hi@Alexander！我正在努力在我的Typescript+Preact应用程序中设置Jest。您能分享一些工作示例或代码吗。