Javascript 反应/酶组分功能未更新状态

我有一个在本地主机上工作的组件。如果输入冠军的字母，onInputHandler（输入）会将组件的状态更改为有效的冠军名称。不幸的是，当我使用酶进行测试时，组件的状态从未改变（保持默认状态）。我很乐意接受任何建议。当我用数组设置this.stateChangionsList时，结果是一样的。通常，数组在componentDidMount（）之后填充GetChampionList（）

导出类ChooseChampion扩展React.Component{
构造函数（）{
超级（）；
此.state={
冠军当选：“选择冠军”，
冠军名单：[]
};
this.onInputHandler=this.onInputHandler.bind（this）；
this.getFilteredChampion=this.getFilteredChampion.bind（this）；
}
componentDidMount（）{
这个.getChampionsList（）；
}
getChampionsList=（）=>{
获取（“/champions list”）
.then（res=>res.json（））
.then（champions=>this.setState（{championsList:champions}））
}
onInputHandler（事件）{
如果（event.target.value==“”）{
这是我的国家({
冠军当选：“选择冠军”
});
}否则{
常量输入=event.currentTarget.value；
const filteredChampion=this.getFilteredChampion（输入）
这是我的国家({
当选冠军：筛选冠军
});
}
}
getFilteredChampion（输入）{
让oneFilteredChampion=this.state.championsList.find（champion=>champion.toLowerCase（）.includes（input.toLowerCase（））
如果（oneFilteredChampion）{
返回一个filteredchampion；
}否则{
返回“错误的名称！”
}
}
render（）{
返回(
{this.props.lane}
)
};
}

以下是我的测试声明：

const lanes = ["Top", "Jungle", "Middle", "Bottom", "Support"]
const app = <ChooseChampion lane={lanes[Math.floor(Math.random() * (5))]} />;

it('Should change the state after change the input value', () => {
  const newValue = 'Ahri';
  const wrapper = mount(app);
  const input = wrapper.find('input');

  input.value = newValue;

  wrapper.update();
  expect(input.value).toEqual(newValue);
  expect(wrapper.state('championSelected')).toEqual(newValue);
});

const lanes=[“顶部”、“丛林”、“中间”、“底部”、“支撑”]
常数app=；
它（'更改输入值后应更改状态'，（）=>{
const newValue='Ahri'；
常量包装=装载（应用程序）；
const input=wrapper.find（'input'）；
input.value=新值；
wrapper.update（）；
expect（input.value）.toEqual（newValue）；
expect（wrapper.state（'championSelected'））.toEqual（newValue）；
});

尝试更换

input.value=newValue

与

input.simulate（'change'，{target:{value:newValue}}）

或

input.simulate（'input'，{target:{value:newValue}}）

要实际触发事件（
onChange
或
onInput
），需要模拟DOM事件。仅更改输入中的值不会触发React侦听器

另一件事是在componentDidMount中获取组件。这是一个异步调用。在
mount
之后，冠军名单将不会被填充。有两种方法可以等待，直到成功。您可以自己使用或编写类似的函数。因此，最终测试应类似于：

it（'更改输入值后应更改状态'，（）=>{
const newValue='Ahri'；
常量包装=装载（应用程序）；
等待waitForExpect（（）=>{
expect（wrapper.state（'championsList'））.to.be.not.empty；
});
const input=wrapper.find（'input'）；
simulate（'change'，{target:{value:newValue}}）；
wrapper.update（）；
expect（input.value）.toEqual（newValue）；
expect（wrapper.state（'championSelected'））.toEqual（newValue）；
});

注意：您可能更喜欢使用模拟后端的工具，而不是在测试中调用实际的端点。
Witaj Krzysztofie，谢谢您的回答。我也这么认为，但模拟方法甚至没有通过最基本期望的测试，更不用说后来触发的函数了……在这两种情况下（模拟更改/输入），结果都是：expect（接收）。toEqual（预期）//deep equality expected:“Ahri”received:undefinedOK，现在我注意到您在
componentDidMount
中执行了
fetch
。这是一个异步调用。州（冠军名单）只有在承诺得到解决后才会更新。我将用可能的解决方案更新答案。
const lanes = ["Top", "Jungle", "Middle", "Bottom", "Support"]
const app = <ChooseChampion lane={lanes[Math.floor(Math.random() * (5))]} />;

it('Should change the state after change the input value', () => {
  const newValue = 'Ahri';
  const wrapper = mount(app);
  const input = wrapper.find('input');

  input.value = newValue;

  wrapper.update();
  expect(input.value).toEqual(newValue);
  expect(wrapper.state('championSelected')).toEqual(newValue);
});