Question

我的问题是：

我使用react的上下文api <StateConsumer></StateConsumer>来检索value.connected，以了解我是否已连接。我想用玩笑来模拟一个已连接的用户。

我的代码是：

    import React, { Component } from 'react';
    import SignPage from '../Connection/SignPage';
    import OgdpcQuery from '../Ogdpc/OgdpcQuery/OgdpcQuery';
    import {StateConsumer} from '../../api/context';

    export default class Landing extends Component {

    render() {

    return (
        <StateConsumer>
            {(value) => {
                if (value.connected === false){
                return (
                    <div className="container">
                        <div className="row">
                            {/* State information on the profile */}
                            <SignPage/>
                        </div>
                        <div className="row">
                        {/* component who ll come to display login of each PS invitation */}
                            {/* <OgdpcRequest/> */}
                        </div>
                    </div>
                )}
                else if(value.connected === true){
                    return (
                        <div className="container">
                            <h1>connected</h1>
                        </div>
                    )
                } 
            }}
        </StateConsumer>
       )
       }
       }

我想开玩笑地进行测试：

以下语句（value.connected）为假，如果我希望此语句为expect(wrapper).to.contain(<SignPage/>)

我尝试使用此代码来了解玩笑的工作方式。我没有如何测试上面的代码（我的着陆组件）：

import {expect} from 'chai';
import React from 'react';
import {shallow} from 'enzyme';
import Landing from '../component/Landing/Landing';
import {StateConsumer} from '../api/context';

describe('<Landing />', () => {

let wrapper;
beforeEach(() => { wrapper = shallow(<Landing />, {context: true})})

const ContextConsumer = <ContextConsumer connected={true}/>

it('Test to look if something insine <Landing />', () => {
    console.log('wrapper ===> ', wrapper.debug({ ignoreProps: true }));
    expect(wrapper).to.contain(<SignPage/>); 
})

}
)

我的应用程序充满了这样的内容，所以我无法前进。

我阅读了许多文档，但我不真正了解它是如何工作的！开玩笑起初对我来说真的很难，init模拟和伪造函数对我来说很奇怪。我认为几周后，对我来说这将变得更加明显！因此，如果您有一些建议，文档非常不稳定的新手或帮助者将会很棒

很抱歉，由于我的英语或措辞，这篇帖子看起来很糟糕。谢谢！

Answer 1

好的，我找到了适合我的情况的解决方案：

describe('<Landing />', () => {
it('Test to look if something inside <Landing />', () => {
        const wrapper  = mount(
            <StateProvider>
                <Landing />
            </StateProvider>
        );
        wrapper.setState({connected : false});
        expect(wrapper).to.contain(<SignPage/>);
    }
)

使用wrapper.setState({connected : false});，我可以将本地状态设置为“ false”，并模拟未在页面上连接的用户，并检查我的SignPage组件是否在那里。

我不知道这是否是最好的方法，但对我来说很好。

我如何用玩笑来测试使用上下文API的React组件？

1 个答案: