1 
"use strict";

import React, { Component, PropTypes } from 'react';
import { FormattedNumber } from 'react-intl';
import $ from 'jquery';

const Increase = require('../Increase').default;

class Quotation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      last: undefined,
      prevClose: undefined
    };
  }

  componentDidMount() {
    this.loadFromServer(this.props.url);
    setInterval((() => {
      this.loadFromServer(this.props.url);
    }).bind(this), this.props.pollInterval);
  }

  loadFromServer(url) {
    $.ajax({
      url: url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({last: parseFloat(data.ticker.last)});
        this.setState({prevClose: parseFloat(data.ticker.prev_close)});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(url, status, err.toString());
      }
    });
  }

  number(n) {
    if (n == undefined) {
      return '...'
    }
    return (
      <FormattedNumber
        value={n}
        maximumFractionDigits={2}
        minimumFractionDigits={2}
      />
    );
  }

  render() {
    return (
      <div className="quotation">
        <div className="title">{this.props.children}</div>
        <div className="last-price">
          {this.number(this.state.last)}
        </div>
        <Increase last={this.state.last}
                  prevClose={this.state.prevClose} />
      </div>
    );
  }
}

Quotation.propTypes = {
  url: PropTypes.string.isRequired,
  pollInterval: PropTypes.number.isRequired,
  children: PropTypes.string.isRequired
};

Quotation.getDefaultProps = {
};

export default Quotation;

以下react-intlはテストです。

component = TestUtils.renderIntoDocument(
  <IntlProvider locale='en'>
    <Quotation url="https://test.com" pollInterval={1000}>
      BTC / CNY
    </Quotation>
  </IntlProvider>
);

it('quotation unloaded', () => {
  const quotation = TestUtils.findRenderedDOMComponentWithClass(
    component, 'quotation'
  );
  let lastPrice = TestUtils.findRenderedDOMComponentWithClass(
    component, 'last-price'
  );
  quotation.setState({last: 1100, prevClose: 1000});// can't access it
  expect(lastPrice.textContent).toEqual(1100);
});

私のreactJSコンポーネントをテストしています。

使っていたのでreact-intl。私はIntlProviderそれをレンダリングするために使用する必要があります。

の状態を設定するにはどうすればよいQuotationですか?

更新: 私は使用します:

let quotation = TestUtils.findRenderedComponentWithType(
  component, Quotation
);

手に入れQuotationましsetStateた。

しかし、別のエラーが発生しました:

https://github.com/yahoo/react-intl/issues/332#issuecomment-189394004

4

1 に答える 1

0

私はこのアプローチをテストしませんでした。推測するだけです。

ドキュメントから、classNameプロパティをコンポーネントに設定する必要があります。あなたの例では、コンポーネントの代わりにDIV要素が見つかります。次のことを試してください。

component = TestUtils.renderIntoDocument(
  <IntlProvider locale='en'>
    <Quotation className="findme" url="https://test.com" pollInterval={1000}>
      BTC / CNY
    </Quotation>
  </IntlProvider>
);

it('quotation unloaded', () => {
  const quotation = TestUtils.findRenderedDOMComponentWithClass(
    component, 'findme'
  );
  let lastPrice = TestUtils.findRenderedDOMComponentWithClass(
    component, 'last-price'
  );
  quotation.setState({last: 1100, prevClose: 1000});// can't access it
  expect(lastPrice.textContent).toEqual(1100);
});

それは機能しますか？

于 2016-02-26T19:10:14.223 に答える