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。 如果你想采取这种方法,我强烈推荐酶 。
让我知道如果你有任何问题!