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

用摩卡咖啡和Chai ReactJS脱布丁

chai mocha.js reactjs node.js

agusgambina · 技术社区 · 6 年前

我正在尝试在一个小应用程序中编写一些测试,这个小应用程序是我在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 回复 | 直到 6 年前

Bartuken 6 年前

在你的后备箱里

删除测试/组件文件夹中的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;

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

推荐文章

pixelpete36 · 在vscode中通过npm加载React时,是否需要在HTML文件中使用<script>标记?

1 年前

Iseoluwa ariyibi · 获取未定义的控制台后日志记录req.body

1 年前

Guilherme Doherty Marques · Javascript机器人检查签证预约不起作用,我不知道如何解决

1 年前

AlaaKudo810 · 无法更新猫鼬中的对象

1 年前

Unnikrishnan KJ · 由于“TypeError”,路径“pathname”处的值“[]”(类型为Array)转换为数组失败

1 年前

Ananya S · 请求hashicorp保险库通过cURL工作,但不通过node-js程序

1 年前

Daniel Varentsoff · 如何使用bullmq重试成功的作业

1 年前

Alireza Keshvari · 如何在ws和express中向具有不同工作人员的所有客户端广播消息?

1 年前

Foobar · 如何在Fastify中为请求附加“项目”密钥?

1 年前

chrispytoes · 从服务器端获取登录用户

1 年前