代码之家 › 专栏 › 技术社区 › agusgambina

用摩卡咖啡和Chai ReactJS脱布丁

chai mocha.js reactjs node.js

agusgambina · 技术社区 · 7 年前

我正在尝试在一个小应用程序中编写一些测试,这个小应用程序是我在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”

如果有人想下载该项目,请点击这里的链接(我面临的问题是 分支添加测试 )

My Repo -&燃气轮机; 分支添加测试

更改为分支addTests

git checkout -b addTests origin/addTests

1 回复 | 直到 7 年前

Bartuken 7 年前

在你的后备箱里

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

只有在不使用它的情况下,它才是默认的样板文件

在您的分支中

您正在测试板组件,但未通过参数。在您的代码中(不是测试),这个参数是通过游戏组件传递的。

我建议您修改助手=>(test\test\u helper.js)到

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

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

而您的电路板测试=>(test\components\board\u test.js)发送至:

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

现在可以将道具传递给渲染组件

推荐文章

gcbenison · mocha--inspect brk让我检查mocha的代码-不是我自己的代码

7 年前

Niru · Javascript单元测试模拟高度函数

7 年前

JKB · 在node\u模块中使用ES6文件运行Mocha时出错/

7 年前

SwimmingG · 具有身份验证的服务器、使用mocha进行测试、设置初始用户会导致服务器超时

7 年前

lokimidgard · 带Mocha的单元测试办公室插件

7 年前

Julian · mocha/sinon存根还原不工作

7 年前

J.R. · sinon存根未替换函数。

7 年前

Christopher Francisco · Mocha-我应该直接在descripe()块或before()内初始化存根吗

7 年前

Buddy Lindsey · 在测试中似乎根本并没有调用Sinon存根,即使它在以前的测试中工作正常

7 年前

made_in_india · Getting error“错误:超时超过2000ms。对于异步测试和挂钩,请确保调用了“done()”

7 年前