如何在测试文件中测试上下文？以及如何从测试文件中的上下文访问值？
Posted
技术标签:
【中文标题】如何在测试文件中测试上下文？以及如何从测试文件中的上下文访问值？【英文标题】：how to test context in the test file ?And how to access values from context in test file? 【发布时间】：2021-07-25 15:27:16 【问题描述】：我是反应上下文和测试的新手。我在我的应用程序中使用了反应上下文，但现在我想测试应用程序，但我不知道如何从测试文件中的上下文访问值。我正在附加组件和上下文文件。
我的组件文件：
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
常量.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 组件？如何在测试中测试上下文？我附上了测试和错误。
【问题讨论】：
这能回答你的问题吗？ Jest mock react context 不，我试过了，但我仍然无法访问上下文值（formData）。我正在添加测试以供参考 您没有将formData 正确传递给提供者。应该是：value= formData 。 formData 是提供者对象值中的一个字段。
成功了！！！。谢谢
【参考方案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
【讨论】：
以上是关于如何在测试文件中测试上下文？以及如何从测试文件中的上下文访问值？的主要内容，如果未能解决你的问题，请参考以下文章