Question

新手做出反应，我正在尝试使用jest对反应应用程序进行单元测试，

使用Flux模式的应用程序，我已经写了一个组件＆＃34; WEATHER＆＃34;在转到另一个之前，我想为该组件编写测试并采用TDD方法。

我的代码运行正常，但测试因此错误而失败

TypeError: tree.props.onChange is not a function

天气组件代码：

// @flow

import React from 'react';
import api from '../api';
import weatherStore from '../stores/weatherStore';

//read from weather store
let _getState = () => {
    return {weather: weatherStore.returnWeather()};
};

export default class Weather extends React.Component {



    constructor(proporties) {
        super(proporties);

        this._onChange = this._onChange.bind(this);

        this.state = _getState();

    }
   componentWillUnmount() {
       weatherStore.removeListener('change', this._onChange);
   }
    componentDidMount() {
        api.getWeather();
        weatherStore.on('change', this._onChange);
    }

    _onChange() {
        this.setState(_getState());
    } 

    render() {
        let weatherState = this.state.weather.map(weather => {

            return <div key={weather.id} className="pull-right row">

                        <div>
                            <span>{weather.main.temp} C</span><br />
                        </div>
                    </div>;
        })

        return <div>{weatherState}</div>;
    }
}

测试代码：

import React from 'react';
import Weather from '../js/components/Weather';
import renderer from 'react-test-renderer';

it('should render weather temp and city', ()=> {
    const component = renderer.create(
        <Weather />
    );

    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();

    // manually trigger the callback
    tree.props._onChange();
    // re-rendering
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();

});

注意，因为我使用的是流量静态类型检查器，所以它总是高亮显示这行代码this._onChange = this._onChange.bind(this);

错误消息说：property＆＃39; _onChange＆＃39;在天气中找不到的财产。

Answer 1

TypeError：tree.props.onChange不是函数

您是否尝试使用以下方式更新测试：

// manually trigger the callback
tree.props._onChange();

注意破折号。

React：onChange不是一个函数

1 个答案: