使用 Mocha 和 Chai React JS 进行调试

Question

我正尝试开始在我根据 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) Board exist: TypeError: Cannot read property '0' of undefined

如果有人要下载工程这里是link（我遇到的问题是在分支下addTests）

My Repo -> 分支添加测试

更改到分支addTests

git checkout -b addTests origin/addTests

Answer 1

在你的后备箱里

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

只有当你不使用它时，它似乎是一个默认的样板文件

在你的分行

您正在测试电路板组件但未传递参数。在您的代码中（未测试）此参数通过游戏组件传递。

我建议你将你的助手 => (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) to:

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

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

使用 Mocha 和 Chai React JS 进行调试

Debbuging with Mocha and Chai ReactJS

mocha.js

node.js

chai

reactjs