QuerySelector with uuid fails, when starting with a number. #168

shavyg2 · 2018-12-06T17:24:34Z

Essentially a useless ticket, sorry if it wastes your time, figured out the issue. This can be closed.

dom-testing-library version: 3.13.0
react version:16.7.0-alpha.2
node version:v10.11.0
npm (or yarn) version :yarn 1.12.3

Relevant code or config:

import React from "react";
import td from "testdouble";
import { render,fireEvent, waitForElement } from "react-testing-library";
import { AssetUploadView, AssetUploadBuilderApi } from '../../page/asset.upload';
import { TestApi } from '../../../lib/ApiCreator/TestApi';
import { GetMockCompany } from '../../../service/api/__resource__/company.resource';
import { GetMockUser } from '../../../service/api/__resource__/user.resource';



describe("AssetUpload Page",()=>{


    const [api] = TestApi(AssetUploadBuilderApi)
    const user = GetMockUser();
    const company = GetMockCompany(user);

    const page = render(<AssetUploadView company={company} api={api} />)
    const update = ()=>page.rerender(<AssetUploadView company={company} api={api} />)
    const dom =  page.container;
    
    
    const add_button = dom.querySelector("#add_asset")
    
    
    beforeEach(update);
    
    test("add child uploads",()=>{
        expect(add_button).toBeDefined()
        fireEvent.click(add_button)
        update();


        let asset_key = api.assets[0]

        page.debug();
        const first_asset = dom.querySelector(`#${asset_key}`)

        // expect(first_asset).toBeDefined()

    })


    test("remove child",()=>{
        
    })


})

What you did:

I am clicking a button and then i am expecting a new element to be rendered

What happened:

 RUNS  src/component/element/__tests__/asset.upload.spec.jsx

Test Suites: 0 of 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5s, estimated 7s
  console.log node_modules/react-testing-library/dist/index.js:59

    <body>
      <div>
        <div
          id="asset_upload_container"
        >
          <div
            data-identity="asset container"
          >
            <div
              id="8433d0a9-c7e2-4986-9c63-74ab9808132b"
            >
              <form>
                <input
                  type="text"
                  value=""
                />
                <label>
                  <div>
                    Asset
                  </div>
                  <input
                    type="file"
                    value=""
                  />
                </label>
              </form>
              <input
                type="button"
                value="remove"
              />
            </div>
          </div>
          <input
 FAIL  src/component/element/__tests__/asset.upload.spec.jsx (7.732s)
  AssetUpload Page
    × add child uploads (4553ms)
    √ remove child (2ms)

  ● AssetUpload Page › add child uploads

    SyntaxError: '#8433d0a9-c7e2-4986-9c63-74ab9808132b' is not a valid selector

      37 |         const first_asset = await waitForElement(()=>dom.querySelector(`#${asset_key}`))
      38 |
    > 39 |         // expect(first_asset).toBeDefined()
         |                                                       ^
      40 |
      41 |     })
      42 |

      at emit (node_modules/nwsapi/src/nwsapi.js:559:17)
      at _querySelectorAll (node_modules/nwsapi/src/nwsapi.js:1451:9)
      at Object._querySelector [as first] (node_modules/nwsapi/src/nwsapi.js:1387:14)
      at HTMLDivElementImpl.<anonymous> (node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:65:42)
      at HTMLDivElementImpl.querySelector (node_modules/jsdom/lib/jsdom/utils.js:123:45)
      at HTMLDivElement.querySelector (node_modules/jsdom/lib/jsdom/living/generated/Element.js:708:45)
      at src/component/element/__tests__/asset.upload.spec.tsx:39:58
      at onMutation (node_modules/dom-testing-library/dist/wait-for-element.js:43:24)
      at Promise (node_modules/dom-testing-library/dist/wait-for-element.js:59:5)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        10.012s
Ran all test suites matching /asset.upload/i.


//and other times i get

 RUNS  src/component/element/__tests__/asset.upload.spec.jsx

Test Suites: 0 of 1 total
Tests:       0 total
Snapshots:   0 total
  console.log node_modules/react-testing-library/dist/index.js:59
    <body>
      <div>
        <div
          id="asset_upload_container"
        >
          <div
            data-identity="asset container"
          >
            <div
              id="a7dea6ec-5d3b-4fa6-97e9-50df75f7fbb3"
            >
              <form>
                <input
                  type="text"
                  value=""
                />
                <label>
                  <div>
                    Asset
                  </div>
                  <input
                    type="file"
                    value=""
                  />
                </label>
              </form>
              <input
                type="button"
                value="remove"
              />
            </div>
          </div>
          <input
            id="add_asset"
 PASS  src/component/element/__tests__/asset.upload.spec.jsx
  AssetUpload Page
    √ add child uploads (37ms)
    √ remove child (2ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.164s

Reproduction:

Problem description:

Some times it renders correctly and gives me no errors other times it doesn't.
the code is complete synchronous, so i am expecting the same result everytime.
plus the message in the error is, Syntax is invalid.

I am pretty sure my div id is a correct format. It's just a uuid. Plus when i print my page debug i see the content of the page and it has the div with that id.

The uuid is generated randomly so i think sometimes it fails that test because it doesn't like the characters and other times it is okay with it.

eg

Fails: 8433d0a9-c7e2-4986-9c63-74ab9808132b
Pass: a7dea6ec-5d3b-4fa6-97e9-50df75f7fbb3

My first guess is an id can't start with number?
I don't know if this is true tho?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

QuerySelector with uuid fails, when starting with a number. #168

QuerySelector with uuid fails, when starting with a number. #168

shavyg2 commented Dec 6, 2018

QuerySelector with uuid fails, when starting with a number. #168

QuerySelector with uuid fails, when starting with a number. #168

Comments

shavyg2 commented Dec 6, 2018

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution: