vendredi 29 novembre 2019

How can i test with jest a react component who use context api?

Ok so i'm quite new on react and i started jest fews days ago after i finished my V1 app. I want to make something very nice to be proud of my code!

So i started jest to protect my app against wrong push, etc...

I wondering how to test this code with jest:

import React, { Component } from 'react';
import SignPage from '../Connection/SignPage';
import OgdpcQuery from '../Ogdpc/OgdpcQuery/OgdpcQuery';
import {StateConsumer} from '../../api/context';
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>
                )}
                else if(value.connected === true){
                    return (
                        <div className="container">
                            <h1>Connected</h1>
                        </div>
                    )
                } 
            }}
        </StateConsumer>
    )
}
}

The thing blocking me it's the with the "value" (more precisely value.connected), how can I simulate it on jest and after check if contain for exemple. My app is fill of stuffs like this, so i can't move forward if i don't understand how to do it on simple page like this.

I read a lot of docs but i did not understand really how it work! Jest look really hard to me at first, init mock and fake function look weird to me. I think after fews weeks on it this will be more obvious for me! So if you have some advises, docs very understable novice or help it will be awesome

Sorry if this post look pretty bad because of my english or formulation. thx!

Aucun commentaire:

Enregistrer un commentaire