在Jest中呈现React组件返回null

Rendering a React component in Jest returns null

本文关键字:组件 返回 null React Jest      更新时间:2023-09-26

我很难用Jest编写测试单元:/这是我的代码:

import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import React from 'react/lib/ReactWithAddons';
jest.mock('react-dom');
jest.mock('react/lib/ReactDefaultInjection');
describe('NewRec component', () => {
    const component = shallow(<NewRec />);
    it('returns true if blah blah', ()=>{
         const p = component.find('errortitle');
         expect(p.length).toEqual(1)
    });
});

p总是0。我试着检查组件在渲染后的样子。问这里的问题:(如何看到在Jest单元测试中渲染的React组件是什么样子?)快照文件显示为空:

 exports[`NewRec component returns true if blah blah 1`] = `null`;

为什么总是null呢?代码中的问题是什么?"NewRec"组件正在使用mixins (mixins: [React.addons.LinkedStateMixin])。这会导致问题吗?

更新:这是组件代码:

export const NewRec = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState() {
        return {
            group_id: null,
            title: "",
            errors: {},
        }
    },
    createRec(event) {
        event.preventDefault();
        if (!this.state.title.length) {
            this.setError('title', "Please add a title");
            return;
        }
        if (!this.state.group_id) {
            this.setError('group', "Please select a group");
            return;
        }
        serverCache.createRec(
            { group: this.state.group_id, title: this.state.title },
            rec => { browser.gotoRec(rec.id); }
        );
    },
    selectgroup(group_id) {
        this.setState({group_id: group_id});
    },
    rendergroupList(groups) {
        return (
                <div > { groups.map(this.rendergroup) } </div>
        );
    },
    onTitleChange(event) {
        this.setState({title:event.target.value});
    },
    componentWillMount() {
        const user = serverCache.getUser();
        if (!user || !user.get('name')) {
            notifications.warning('Please login first.');
        }
    },
    render() {
        const user = serverCache.getUser();
        const groups = serverCache.getgroups();
        return (
            <div className="row">
                <form className="form-horizontal" onSubmit={this.createRec}>
                    <label htmlFor="title" className="col-sm-3 control-label"> Title </label>
                    <div>
                        <input type="text"  id='title' value={this.state.title} onChange={this.onTitleChange} />
                    </div>
                    <div> 
                        <label htmlFor="group" className="col-sm-3 control-label" >group </label>
                    </div>
                    <div> 
                        {this.state.errors.title ? <div id='errortitle' >{this.state.errors.title} </div>: false }
                        {this.state.errors.group ? <div id='errorgroup' >{this.state.errors.group} </div> : false }
                        <div > 
                            <button type="submit" className="btn btn-primary btn-default btn-block"> Create Rec</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
});

我认为 component.find('new-rec').length 是0,因为没有new-rec组件,标签,或者你正在寻找的任何东西,我的意思是,当我看到这个代码const p = component.find('new-rec');时,我明白你正试图获得一个p标签与new-rec类或类似的东西,但是如果你正在寻找一个类,那么你必须做const p = component.find('.new-rec'); 注意de点之前de word (css选择器)。但它将再次为0,因为我没有看到任何带有p标签。NewRec组件中的new-rec类