使用Jest with Typescript + preact

在测试中将JSX编译为h()存在问题。所有配置文件与create-react-app类似，排除TypeScript和preact和preact的变化使用Jest with Typescript + preact

我通过create-react-app my-app --script=react-scripts-ts创建应用程序 - 用于TypeScript项目。然后弹出并将react更改为preact（不要使用preact-compat）。

迁移到preact我添加到package.json为babel.plugins section新的插件["babel-plugin-transform-react-jsx", { pragma: "h"}] - 为transpiling <JSX />到h(JSX)函数调用，而不是默认React.createElement(JSX)（迁移指南https://preactjs.com/guide/switching-to-preact）。

这工作正常。

但测试具有不同配置的传译<JSX />：它是transpile到React.createElement(JSX)是默认值。在测试中，我收到一个错误ReferenceError: React is not defined at Object.<anonymous> (src/Linkify/Linkify.test.tsx:39:21)。如果我在测试和测试文件中手动更改<JSX />到h(SomeComponent) - 它工作。

如何将<JSX />转换为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); 
});

来源

2017-07-27 Alexander Sivashev

我找到了解决方案。

我错了babel.plugins部分new plugin ["babel-plugin-transform-react-jsx", { pragma: "h"}] - 它没有使用。真的这个编译指示使用从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 
};

希望这将是有益的。

来源

2017-07-28 08:05:07

使用Jest with Typescript + preact

回答

相关问题