如何测试测试文件中的上下文？以及如何从测试文件中的上下文访问值？

Question

我是 React 上下文和测试的新手。我在我的应用程序中使用了 React 上下文，但现在我想测试该应用程序，但我不知道如何从测试文件中的上下文访问值。我正在附加组件和上下文文件。

我的组件文件：

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

我的上下文文件：

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: '',
    },
},

测试：

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

如何测试OTARequestCommandParameters组件？如何在测试中测试上下文？我附上了测试和错误。

Answer 1

您只需使用您的组件呈现上下文。

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

见Mocking Context with React Testing Library

如何测试测试文件中的上下文？以及如何从测试文件中的上下文访问值？

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

reactjs

react-context

react-testing-library