how to test context in the test file ?And how to access values from context in test file?

Question

I am new to react context and testing. I have used react context in my application but now I want to test the application but I don't know how to access values from context in test file. I am attaching component and context file.

My component file:

import React, { useContext } from 'react'
import constants, {
    parametersEnum,
    commandParametersEnum,
    commandTypeEnum,
} from '../../../constants'
import Parameters from '../Parameters'   
import { OTAFormContext } from '../../utils/Context/OTAFormContext'

export const componentTestId = 'SelectorNetwork'

function OTARequestCommandParameters(props) {
    const { formData, updateFormData } = useContext(OTAFormContext)
    let command = formData.COMMAND_TYPE
    
    if (!command) return null
            
    const commandObject = constants.OTARequestCommands.choices.find(
        (_p) => _p.value === command,
    )
    console.log('formData==>', formData) //remove later
    const supportedParameters = commandObject.parameters
            
    let parameters = supportedParameters.map((parameter) => {
        let onChange = null
        let options = null
        let preFilledValue = null
                
        switch (command) {
            case commandTypeEnum.CHANGE_PREFERRED_PLMN: {
                if (
                    parameter.type === parametersEnum.textAreaInput &&
                    parameter.value === commandParametersEnum.NEW_PREFERRED_PLMN
                ) {
                    preFilledValue = formData.CHANGE_PREFERRED_PLMN.NEW_PREFERRED_PLMN
                    onChange = (e) => {
                        updateFormData({
                            ...formData,
                            CHANGE_PREFERRED_PLMN: { NEW_PREFERRED_PLMN: e.target.value, },
                        })
                    }
                }
                break
            }      
            case commandTypeEnum.CHANGE_SMSC_NUMBER: {
                if (
                    parameter.type === parametersEnum.inputTextBox &&
                    parameter.value === commandParametersEnum.NEW_SMSC_NUMBER
                ) {
                    preFilledValue = formData.CHANGE_SMSC_NUMBER.NEW_SMSC_NUMBER
                    onChange = (e) => {
                        updateFormData({
                            ...formData,
                            CHANGE_SMSC_NUMBER: { NEW_SMSC_NUMBER: e.target.value },
                        })
                    }
                }
                break
            }
            case commandTypeEnum.FORCED_PREFERRED_IMSI_SWITCH: {
                if (
                    parameter.type === parametersEnum.textAreaInput &&
                    parameter.value === commandParametersEnum.NEW_FULL_PREFERRED_IMSI_FILE
                ) {
                    preFilledValue = formData.FORCED_PREFERRED_IMSI_SWITCH.NEW_FULL_PREFERRED_IMSI_FILE
                    onChange = (e) => {
                        updateFormData({
                            ...formData,
                            FORCED_PREFERRED_IMSI_SWITCH: { NEW_FULL_PREFERRED_IMSI_FILE: e.target.value, },
                        })
                    }
                }
                break
            }
            case commandTypeEnum.MODIFY_PREFERRED_IMSI: {
                if (
                    parameter.type === parametersEnum.textAreaInput &&
                    parameter.value === commandParametersEnum.NEW_FULL_PREFERRED_IMSI_FILE
                ) {
                    preFilledValue = formData.MODIFY_PREFERRED_IMSI.NEW_FULL_PREFERRED_IMSI_FILE
                    onChange = (e) => {
                        updateFormData({
                            ...formData,
                            MODIFY_PREFERRED_IMSI: { NEW_FULL_PREFERRED_IMSI_FILE: e.target.value, },
                        })
                    }
                }
                break
            }
            case commandTypeEnum.SYNC_AN_IMSI: {
                options = parameter.options
                if (
                    parameter.type === parametersEnum.dropdown &&
                    parameter.value === commandParametersEnum.ACTION_TO_SYNC
                ) {
                    preFilledValue = formData.SYNC_AN_IMSI.ACTION_TO_SYNC
                        onChange = (e, data) => {
                        updateFormData({
                            ...formData,
                            SYNC_AN_IMSI: {
                                ...formData.SYNC_AN_IMSI,
                                ACTION_TO_SYNC: data.value,
                            },
                        })
                    }
                }

                if (
                    parameter.type === parametersEnum.dropdown &&
                    parameter.value === commandParametersEnum.TARGET_IMSI_PROFILE
                ) {
                    preFilledValue = formData.SYNC_AN_IMSI.TARGET_IMSI_PROFILE
                    onChange = (e, data) => {
                        updateFormData({
                            ...formData,
                            SYNC_AN_IMSI: {
                                ...formData.SYNC_AN_IMSI,
                                TARGET_IMSI_PROFILE: data.value,
                            },
                        })
                    }
                }
                break
            }
        }

        const _arguments = {
            parameterName: parameter.type,
            onChange,
            label: parameter.label,
            placeholder: parameter.placeholder,
            options,
            preFilledValue: preFilledValue,
        }

        return <Parameters {..._arguments} />
    })

    return <div data-testid={componentTestId}>{parameters}</div>
}

export default OTARequestCommandParameters

My context file:

import React, { useState, createContext } from 'react'
import constants from '../../../constants'

export const OTAFormContext = createContext()

const OTAFormContextProvider = (props) => {
    let defaultFormData = constants.defaultContextFormData
    const [formData, setFormData] = useState(defaultFormData)

    const updateFormData = (data) => {
        setFormData(data)
    }

    return (
        <OTAFormContext.Provider value={{ formData, updateFormData }}>
            {props.children}
        </OTAFormContext.Provider>
    )
}
    
export default OTAFormContextProvider

Constants.js:

defaultContextFormData: {
    COMMAND_TYPE: '',
    ICCID: '',
    CHANGE_PREFERRED_PLMN: {
        NEW_PREFERRED_PLMN: '',
    },
    CHANGE_SMSC_NUMBER: {
        NEW_SMSC_NUMBER: '',
    },
    FORCED_PREFERRED_IMSI_SWITCH: {
        NEW_FULL_PREFERRED_IMSI_FILE: '',
    },
    MODIFY_PREFERRED_IMSI: {
        NEW_FULL_PREFERRED_IMSI_FILE: '',
    },
    SYNC_AN_IMSI: {
        ACTION_TO_SYNC: '',
        TARGET_IMSI_PROFILE: '',
    },
},

Test:

const _constants = constants.OTARequestCommands
  let _network = _constants.choices.map((item) => [item.value, item.label])
 test.each(_network)(
    'Verify that passing selectedNetwork %j is correctly reflected',
    (name) => {
      const formData = { COMMAND_TYPE: name }
      const component = render(
        <OTAFormContext.Provider value={formData}>
          <OTARequestCommandSelector />
        </OTAFormContext.Provider>,
      )
      const { queryAllByText } = component

      queryAllByText(name).forEach((item) => {
        const { getByText } = within(item)
        expect(getByText(name)).toBeInTheDocument()
      })
    },
  )

Error:

 

TypeError: Cannot read property 'COMMAND_TYPE' of undefined

      22 |     onChange: onCommandChange,
      23 |     options: options,
    > 24 |     value: formData.COMMAND_TYPE,
         |                     ^
      25 |   }
      26 |   return (
      27 |     <div className="otaRequestCommandSelector" data-testid={componentTestId}>

How to test OTARequestCommandParameters component? How to test context in the test? I have attached Test and Error.

Does this answer your question? [Jest mock react context](https://stackoverflow.com/questions/54292298/jest-mock-react-context) — juliomalves, May 03 '21 at 09:21
No, i tried this but still i am not able to access context value (formData). i am adding test for reference — Jaimini Chothwani, May 03 '21 at 11:08
You're not passing the `formData` correctly to the provider. Should be: `value={{ formData }}`. `formData` is a field in the provider's object value. — juliomalves, May 03 '21 at 11:17

Jaimini Chothwani · Accepted Answer · 2021-05-03T11:45:26.913

0

You just render the context with your component.

 const formData = { COMMAND_TYPE: 'Type anything you expect' }
 const component = render(
        <OTAFormContext.Provider value={{ formData }}>
          <OTARequestCommandSelector />
        </OTAFormContext.Provider>,
      )

See Mocking Context with React Testing Library

edited May 03 '21 at 11:45

answered May 03 '21 at 11:29

Jaimini Chothwani

85
8

how to test context in the test file ?And how to access values from context in test file?

1 Answers1