你如何在带有 Typescript 的 create-react-app 中使用 Mocha？

Posted 2023-03-06

【中文标题】你如何在带有 Typescript 的 create-react-app 中使用 Mocha？

【英文标题】：How do you use Mocha in create-react-app with Typescript?

【发布时间】：2018-11-08 00:49:12

【问题描述】：

我正在使用 create-react-app (typescript) 来创建 React 应用程序，但我想使用 mocha + 酶而不是 jest 来测试我的 React 组件。

在此之前我正在使用这个测试脚本

"test" :"NODE_ENV=development mocha --watch-extensions tsx --watch --require ignore-styles --require babel-core/register ./src/*.test.tsx"。

但是 mocha 不理解正在导入的 tsx 文件。

测试脚本：

"test": "NODE_ENV=development mocha -r babel-core/register -r ts-node/register src/*.test.tsx"。

错误：

TSError: Γ¿» Unable to compile TypeScript
src\ComponentTest.test.ts (7,34): Parameter 'obj' implicitly has an 'any' 
type. (7006)
src\ComponentTest.test.ts (7,237): Property 'default' does not exist on type 
''. (2339)
 at getOutput (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\ts-node\src\index.ts:330:15)
at Object.compile (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\ts-node\src\index.ts:518:11)
at Module.m._compile (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\ts-node\src\index.ts:403:43)
at loader (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\babel-register\lib\node.js:144:5)
at require.extensions.(anonymous function) (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\babel-register\lib\node.js:154:7)
at Object.require.extensions.(anonymous function) [as .ts] (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\ts-node\src\index.ts:406:12)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\mocha\lib\mocha.js:250:27
at Array.forEach (<anonymous>)
at Mocha.loadFiles (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\mocha\lib\mocha.js:247:14)
at Mocha.run (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\mocha\lib\mocha.js:576:10)
at Object.<anonymous> (E:\AssetWise\BeConnect_AssetWiseConncet\AssetWiseCONNECT\src\Client\assetwiseconnect\node_modules\mocha\bin\_mocha:637:18)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3

测试文件：

import * as expect from 'chai';
import * as React from 'react'; 
import * as enzyme from 'enzyme';
import App from './App';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure(adapter : new Adapter());

describe('simple test with mocha', () => 
    it('should pass' , () => 
        // tslint:disable-next-line:no-unused-expression
        expect.expect(true).to.be.true;
    );
);

describe('testing react components', () => 
   const wrapper = enzyme.shallow(<App/>);
   expect.expect(wrapper.find('div')).to.have.length(1);  
 );

应用组件：

import * as React from 'react';
import './App.css';
const logo = require('./logo.svg');

class App extends React.Component 
  render() 
    return (
      <div className="App">
        <header className="App-header">
          <img src=logo className="App-logo"  />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Sample/>
      </div>
    );
  


export default App;

【参考方案1】：

你可以试试这样的

import * as expect from 'chai';
describe('calculate', function() 
    let mainExpect = expect.expect;

    it('add', function() 
      let result = 5 + 2;
      mainExpect(result).equal(7);
    ); 
  );