fixed-data-tableとその兄弟のアドオンに取り組んでいますが、Mocha/Chai セットアップを使用してテストをセットアップするのに苦労しています。私が得るエラーは次のとおりです。
TypeError: obj.indexOf is not a function
at Assertion.include (node_modules/chai/lib/chai/core/assertions.js:228:45)
at Assertion.assert (node_modules/chai/lib/chai/utils/addChainableMethod.js:84:49)
at Context.<anonymous> (test/HOC/addFilter_test.jsx:48:23)
私が見つけることができたすべてのチュートリアルは、簡単なコンポーネントのテストを処理する方法を示しています。エラーは、ノードが複雑なコンポーネントであることが原因であると思います。
私の質問:より複雑なコンポーネントを作成するにはどうすればよいですか? 特に、次の点について助けてください。
- そのセルの値を含むノードを見つける
- セルがどのように実装されているかをテストするときは、無知のままにし
divてください。td - 行 1 の要素/セルが、行 2 にあるはずの要素の前または後に表示されるかどうかを確認します (並べ替えを検証するため)。
バックグラウンド
コア テストのセットアップ:
import React from 'react';
import { describe, it } from 'mocha';
import { Table, Column, Cell } from 'fixed-data-table';
import jsdom from 'jsdom';
import jquery from 'jquery';
import chaiJquery from 'chai-jquery';
import TestUtils from 'react-addons-test-utils';
import chai, { expect } from 'chai';
import Data from '../stub/Data';
// Set up testing environment to run like a browser in the command line
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
const $ = jquery(global.window);
class Wrapper extends React.Component {
render() {
return this.props.children;
}
}
Wrapper.propTypes = {
children: React.PropTypes.node,
};
// build 'renderComponent' helper that should render a given react class
function renderComponent(ComponentClass, props) {
let node = null;
if (typeof (ComponentClass) === 'function') {
TestUtils.renderIntoDocument(
<Wrapper ref={n => (node = n)}>
<ComponentClass {...props} />
</Wrapper>);
} else {
TestUtils.renderIntoDocument(<ComponentClass {...props} ref={n => (node = n)} />);
}
return node;
}
// Set up chai-jquery
chaiJquery(chai, chai.util, $);
const TextCell = ({ rowIndex, columnKey, data }) => (
<Cell>
{data.getObjectAt(rowIndex)[columnKey]}
</Cell>);
TextCell.propTypes = {
rowIndex: React.PropTypes.number,
columnKey: React.PropTypes.string,
data: React.PropTypes.object,
};
データ スタブ:
class Data {
constructor(nrows = 4) {
this.size = nrows;
}
getSize() {
return (this.size);
}
getObjectAt(index) {
if (index < 0 || index >= this.size) {
return (null);
}
return {
id: index,
name: `Test name no ${index}`,
};
}
}
export default Data;
実際のテスト:
describe('Basic test', () => {
it('some test', () => {
const data = new Data();
const node = renderComponent(props =>
(<Table
rowHeight={50}
headerHeight={50}
height={500}
width={500}
filters={{ name: '' }}
rowsCount={data.getSize()}
{...props}
>
<Column
columnKey="id"
width={250}
header={<Cell>ID</Cell>}
cell={<TextCell data={data} />}
/>
<Column
columnKey="name"
width={250}
header={<Cell>Name</Cell>}
cell={<TextCell data={data} />}
/>
</Table>));
for (let i = 0; i < data.getSize(); i += 1) {
expect(node).to.contains(`Test name no ${i}`);
}
});
});
アップデート
提案されたように酵素に変更されました：
import React from 'react';
import { describe, it } from 'mocha';
import chai, { expect } from 'chai';
import { shallow } from 'enzyme';
import chaiEnzyme from 'chai-enzyme';
import { Table, Column, Cell } from 'fixed-data-table';
import Data from '../stub/Data';
Error.stackTraceLimit = 10;
chai.use(chaiEnzyme);
const TextCell = ({ rowIndex, columnKey, data }) => (
<Cell id={`${rowIndex}_${columnKey}`}>
{data.getObjectAt(rowIndex)[columnKey]}
</Cell>);
TextCell.propTypes = {
rowIndex: React.PropTypes.number,
columnKey: React.PropTypes.string,
data: React.PropTypes.object,
};
describe('Basic test', () => {
it('some test', () => {
const data = new Data();
const node = shallow(<Table
rowHeight={50}
headerHeight={50}
height={500}
width={500}
filters={{ name: '' }}
rowsCount={data.getSize()}
>
<Column
columnKey="id"
width={250}
header={<Cell>ID</Cell>}
cell={<TextCell data={data} />}
/>
<Column
columnKey="name"
width={250}
header={<Cell>Name</Cell>}
cell={<TextCell data={data} />}
/>
</Table>);
for (let i = 0; i < data.getSize(); i += 1) {
expect(node.find(`#${i}_name`)).to.have.length(1, `Can't find cell with id: ${i}_name`);
}
});
});
自動生成された ID マーカーを に追加し、Textcellを使用して検索しようとしまし.find(`#${i}_name`)たが、オブジェクトが見つかりません。を使用してラップされた要素の出力を確認しましたがnode.html()、適切な ID を持つセルが含まれています。
<div class="fixedDataTableCellLayout_wrap1 public_fixedDataTableCell_wrap1" id="0_name">
<div class="fixedDataTableCellLayout_wrap2 public_fixedDataTableCell_wrap2">
<div class="fixedDataTableCellLayout_wrap3 public_fixedDataTableCell_wrap3">
<div class="public_fixedDataTableCell_cellContent">
Test name no 0
</div>
</div>
</div>
</div>