使用 Mocha 和 Chai React JS 进行调试答案

【问题标题】：Debbuging with Mocha and Chai ReactJS使用 Mocha 和 Chai React JS 进行调试
【发布时间】：2018-04-19 19:26:31
【问题描述】：

我正在尝试在一个小应用程序中编写一些测试，该应用程序是根据 React 教程编写的

我的堆栈

node -> v8.7.0
mocha -> "^5.1.0"
jsdom -> "^11.8.0"
jquery -> "^3.3.1"
react-dom -> "^16.3.2"
react -> "^16.3.2"
chai -> "^4.1.2"
babel-register -> "^6.26.0"

这是我的test_helper

import { JSDOM } from 'jsdom';
import jquery from 'jquery';
import ReactTestUtils from 'react-dom/test-utils';
import React from 'react';
import ReactDOM from 'react-dom';
import { expect } from 'chai';

//Set up testing environment to run like a browser in the command line
const dom = new JSDOM('<!doctype html><html><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;

const $ = jquery(global.window);

// Build a 'renderComponent' helper that should render a given react class
function renderComponent(ComponentClass) {
  const componentInstance = ReactTestUtils.renderIntoDocument(<ComponentClass />);

  return $(ReactDOM.findDOMNode(componentInstance));
}

//Build a helper for simulating events

//Set up chai-jquery
export { renderComponent, expect };

我的board_test

import { renderComponent, expect } from '../test_helper';
import Board from '../../src/components/board';

describe('Board', () => {
  it('exist', () => {
    const component = renderComponent(Board);
    expect(component).to.exist;
  });
});

在package.json 我有

...
"scripts": {
  ...
  "test": "mocha --require babel-register --require ./test/test_helper.js --recursive ./test",
  "test:watch": "npm run test -- --watch"
}
...

当我运行 npm test 时出现此错误，我知道这与 renderComponent(...) 相关

1) 董事会存在： TypeError：无法读取未定义的属性“0”

如果有人想在这里下载项目是链接（我面临的问题是在branch addTests下）

My Repo -> 分支添加测试

切换到分支addTests

git checkout -b addTests origin/addTests

【问题讨论】：

标签： node.js reactjs mocha.js chai

【解决方案1】：

在你的后备箱里

在您的测试/组件文件夹中删除您的 app_test => (https://github.com/agusgambina/react-tic-tac-toe/tree/master/test/components)。

仅当您不使用它时，它似乎是一个默认的样板文件

在您的分支中

您正在测试板组件而没有传递参数。在您的代码中（未测试），此参数由游戏组件传递。

我建议你修改你的 helper => (test\test_helper.js) 到这个

function renderComponent(ComponentClass,props) {
  if (!props) props = {};
  const componentInstance = ReactTestUtils.renderIntoDocument(<ComponentClass  {...props}/>);

  return $(ReactDOM.findDOMNode(componentInstance));
}

和你的电路板测试 => (test\components\board_test.js) 到：

const component = renderComponent(Board, YOUR_PROPS_HERE);
expect(component).to.exist;

现在你可以将 props 传递给你的 renderComponent

【讨论】：