我如何用 jest 测试使用上下文 api 的反应组件？答案

【问题标题】：How can i test with jest a react component who use context api?我如何用 jest 测试使用上下文 api 的反应组件？
【发布时间】：2019-11-29 09:25:56
【问题描述】：

我的问题是：

我使用 react 的上下文 API <StateConsumer></StateConsumer> 来检索 value.connected 以了解我是否已连接。我想用 jest 来模拟连接用户。

我的代码是：

    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>
       )
       }
       }

我想用 jest 做一个测试：

如果我想验证以下语句（value.connected）为假expect(wrapper).to.contain(<SignPage/>)

我尝试了这段代码来了解 jest 的工作原理。我不会如何测试上面的代码（我的登陆组件）：

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/>); 
})

}
)

我的应用充满了这样的东西，所以我无法前进。

我阅读了很多文档，但我并不真正了解它是如何工作的！ Jest 一开始对我来说真的很难看，init mock 和 fake 函数对我来说看起来很奇怪。我想几周后这对我来说会更明显！因此，如果您有一些建议，文档非常不稳定的新手或帮助会很棒

抱歉，如果因为我的英语或表述而使这篇文章看起来很糟糕。谢谢！

【问题讨论】：

标签： reactjs testing jestjs

【解决方案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 组件是否存在。

我不知道这是否是最好的方法，但对我来说它工作正常。

【讨论】：