如何使用笑话和酶测试材料 UI SelectField 上的 onChange 事件

时间:2021-02-03 08:30:27

标签: testing select jestjs material-ui onchange

这是我要测试的 selectField

``

<SelectField> 
  id={'selectFieldForRole'}
  floatingLabelText='Role'
  value={selectedRole}
  onChange={(_, index, value) => {
   this.updateSelectedRole(value);
  }}
>
  {
  frontendConfigFile.ROLE_VALUES_FOR_DEFAULT_BANNERS.map(role => (
  <MenuItem value={role} primaryText={role} />
  ))
  }
</SelectField>

``

this.updateSelectedRole 的实现如下。

updateSelectedRole = (value) => {
const selectedArea = frontendConfigFile.ALLOWED_AREAS_FOR_DIFFERENT_ROLES[value][0];
//this above line is throwing error because value is received as undefined. [0] of undefined is resulting //in error
  };

我的测试用例如下

it('try changing role for banners', () => {
    const component = shallow(
      <BannerView
        getBanner = {getBannerMock}
      />
    );
    const instance = component.instance();
    jest.spyOn(instance, 'updateSelectedRole');
    component.find('#selectFieldForRole').simulate('change', { target: { value: 'ABC' }});
    expect(instance.updateSelectedRole).toHaveBeenCalledTimes(1);
    expect(instance.updateSelectedRole).toHaveBeenCalledWith('COLLEGE');
  });

登录控制台的实际错误是

类型错误:无法读取未定义的属性“0” > 138 | const selectedArea = frontendConfigFile.ALLOWED_AREAS_FOR_DIFFERENT_ROLES_FOR_BANNERS[value][0];

请提出一些解决方案,提前致谢

0 个答案:

没有答案