testing具有.jsx扩展名的React组件

我是React框架的新手,现在我正在探索如何在React中testing组件。 我正在关注这个例子: https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack : https://www.codementor.io/reactjs/tutorial/test-reactjs-components-karma-webpack用于设置使用摩卡和业力的React的unit testing框架。

我意识到,我所有的组件都有.jsx扩展名,而不是.js,我挖得更深。 我了解在导入/使用之前需要构build的组件。

我尝试使用这个例子: http://www.bebetterdeveloper.com/coding/getting-started-react-mocha.html : http://www.bebetterdeveloper.com/coding/getting-started-react-mocha.html 。 但是这不包括业力。

我如何使用业力,使jsx文件被build立,然后导入?

我使用gulp来构build工件,而我的NodeJS版本是5.6

下面是一个使用Mocha,Chai和一个jsdom助手的unit testingReact组件的简单例子,它用来代替像Karma这样的testing运行器。

您将需要以下依赖项:

 "dependencies": { "react": "^15.1.0", "react-dom": "^15.1.0" }, "devDependencies": { "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.11.1", "babel-register": "^6.9.0", "chai": "^3.5.0", "jsdom": "^9.3.0", "mocha": "^2.5.3" } 

有一个指向mocha的npm脚本也很有用 – npm run test将执行你的testing:

 "scripts": { "test": "./node_modules/.bin/mocha" }, 

在build立了你的依赖之后,你需要一个如下所示的目录结构:

 . ├── /src │ └── component-to-test.js ├── /test │ ├── /unit │ │ └── component-to-test.spec.js │ ├── /util │ │ └── jsdom.js │ └── mocha.opts ├── .babelrc └── package.json 

我们将从您的.babelrc文件开始。 你需要Babel把你的JSX转换成JavaScript。 如果你想使用ES6语法(强烈推荐),Babel也会帮忙。 我已经在devDependencies中包含了这两个预设。

.babelrc:

 { "presets": ["es2015", "react"] } 

接下来,我们来看看jsdom的帮手。 这是为了将React组件渲染到内存中的DOM中所需要的,这通常由像Karma这样的testing运行者来处理。

jsdom.js:

 (function () { 'use strict'; var jsdom = require('jsdom'), baseHTML, window; if (!global.window) { baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>'; window = jsdom.jsdom(baseHTML).defaultView; global.window = window; global.document = window.document; global.navigator = window.navigator; } }()); 

为了利用这个jsdom帮助器在我们的mochatesting中使用,我们需要设置一个mocha.opts文件来指定一些configuration选项。 我们将添加一个编译器,告诉Babel预处理testing,我们将require jsdom帮助器,因此React有一个DOM用于呈现组件。

mocha.opts:

 --compilers js:babel-register --recursive --reporter spec --ui bdd --require ./test/util/jsdom.js 

最后,我们可以开始testingReact组件。 作为一个例子,这里是一个我们可以testing的简单的组件。

testingcomponent.js:

 import React from 'react'; export default class TestComponent extends React.Component { render() { return ( <div className="test-component">Here is a test component</div> ); } } 

这里是testing这个组件标记的testing套件。

testingcomponent.spec.js:

 import TestComponent from '../../src/test-component'; import {expect} from 'chai'; import React from 'react'; import ReactDOM from 'react-dom'; import ReactTestUtils from '../../node_modules/react/lib/ReactTestUtils'; describe('Test Component', () => { let renderedNode; function renderComponent() { const componentElement = React.createElement(TestComponent), renderedElement = ReactTestUtils.renderIntoDocument(componentElement); renderedNode = ReactDOM.findDOMNode(renderedElement); } beforeEach(() => { renderComponent(); }); it('should exist with the correct markup', () => { expect(renderedNode.tagName).to.equal('DIV'); expect(renderedNode.className).to.equal('test-component'); expect(renderedNode.textContent).to.equal('Here is a test component'); }); }); 

在这一点上,命令npm run test应该导致一个单一的通过testing。

而就是这样! 如果您正在寻找更先进的testing技术,您可以完全避免使用jsdom帮助程序,并使用浅显示进行testing。 如果你想采取这种方法,我强烈推荐酶 。

让我知道如果你有任何问题!