3

I construct the wrapper:

this.wrapper = mount(<App />, { context: this.store });

Then I try to find a certain HTML element by its id:

console.log("WRAPPER:", this.wrapper.debug());
return this.wrapper.find('#Form-input[0]-fields-field1');

The wrapper is unable to find this element. The output of the console.log is as follows:

WRAPPER:
<Many children/components down...>
    <input name="Form-input[0].fields.field1" onBlur={[Function]} onChange={[Function]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value="asdf" type="text" id="Form-input[0]-fields-field1" disabled={false} />
<Many more things after this...>

So the input with the correct id is definitely there. Am I missing something?

Infamous911
  • 1,441
  • 2
  • 26
  • 41

1 Answers1

4

It appears that you are using an ID selector #Form-input[0]-fields-field1 but I believe that [ and ] are invalid for CSS IDs, perhaps you could search for the input by name, does input[name="Form-input[0]-fields-field1"] work? And if I am wrong and the square brackets are in fact OK, you may still need to escape them in the query!

Alex Griffis
  • 708
  • 4
  • 9
  • You are correct! However, it seems that wrapper.find doesn't allow for escaped characters. Thus, I ended up solving it by calling wrapper.find({ id: 'Form-input[0]-fields-field1' }) which worked fine. – Infamous911 Jul 27 '17 at 00:29
  • Glad you fixed it! I checked Enzyme's repo for issues related to this - they are working on a solution to improve selectors. – Alex Griffis Jul 27 '17 at 00:30
  • Yeah the fact that the argument to `find` isn't treated like a normal css selector string is super confusing! It seems that it looks for the ] character, at which point it ignores everything else after that character. – Infamous911 Jul 27 '17 at 00:32