Тестирование React-Autocomplete в ферменте - PullRequest
0 голосов
/ 15 февраля 2019

Я пытаюсь протестировать реагирующий модуль автозаполнения, используя Enzyme и Jest для запуска теста.Пока у меня есть

   test("Render Autocomplete Test",async () => {

    let expectedUnmappedEntityArray = [];

    let wrapper = shallow(<Map
        unmappedArray={[0]}
        entity='User'
    />);

        wrapper.instance().state.newMapping[0].selectedEntity = "John Smith(johnS)";
        wrapper.instance().state.newMapping[0].permissionsToSave = ['Cashier'];
        wrapper.instance().state.newMapping[0].isRemoved = false;

        wrapper.instance().state.unmappedArray[0] = wrapper.instance().state.newMapping[0];
        wrapper.instance().state.unmappedArray[0].selectedEntity = "Will Smith(willS)";

        wrapper.find('Button').simulate('click'); //Opens the dialog with the autocomplete in it

        wrapper.find(Dialog).dive().find('Autocomplete').simulate('change',{target:{value:'Will'}});
        console.log(wrapper.instance().state.unmappedEntityArray[0].selectedEntity);
     wrapper.find(Dialog).dive().find('Autocomplete').simulate('focus');


});

для теста, и рендеринг в основном такой:

render() {
return (
  <div style={{ textAlign: "center" }}>
    <br />
    <Button primary raised onClick={this.onAddMappingModalShow}>
      Add Mapping
    </Button>
    <br />
    <br />
    <br />
    <Dialog>
      <DialogHeader>
        Select a {this.state.entity} to map it 
      </DialogHeader>
      <DialogBody scrollable>
        <Table>
          <thead>
            <tr>
              <th>{this.state.entity}</th>
              <th>Permissions</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {this.state.addMappingModalOpen &&
              this.state.newMapping.map(
                (item, index) =>
                  !item.isRemoved && ( 
                    <tr key={"new_mapping_" + index}>
                      <td>
                        {this.state.unmappedArray.length > 0 && (
                          <Autocomplete
                            label={"Search " + this.state.entity + "..."} 
                            helperText={
                              <TextFieldHelperText>
                                Please enter minimum 2 characters
                              </TextFieldHelperText>
                            }
                            minChars={2}
                            items={this.state.unmappedArray} 
                            value={item.selectedEntity} 
                            onSelected={value => { 
                            console.log('foo');
                            }}
                          />
                        )}
                      </td>
          </tbody>
        </Table>
      </DialogBody>

          </span>
        </div>
      </DialogFooter>
    </Dialog>
  </div>
);
}
}

Независимо от того, что я делаю, я не могу коснуться внутренней части автозаполненияраздел и заставить его зайти внутрь на избранном.До сих пор все, что я действительно знаю, это то, что диалог рендерится и что автозаполнение, похоже, существует.Итак, почему я не могу выбрать это и заставить это напечатать что-нибудь в этом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...