queryByRole types aren't aligned to implementation

[chiefGui]

• dom-testing-library version: ^3.10.1
• react version: ^16.6.0
• node version: 9.2.0
• npm (or yarn) version: yarn v1.10.1

Relevant code or config:

test("render tab title with icon", () => {
  expect(queryByRole(document.body, "figure")).toBeNull();

  render(
    <Tabs>
      <Tabs.Tab title="Home" icon={AlbumsIcon}>
        hello world
      </Tabs.Tab>
    </Tabs>
  );

  expect(queryByRole(document.body, "figure")).toBeTruthy();
});

What you did:

I've ran some tests.

What happened:

Tests are passing, but TypeScript is complaining.

Reproduction:

// index.test.tsx

import * as React from "react"
import { render, cleanup } from "react-testing-library"
import { queryByRole } from "dom-testing-library"
import { Something } from "."

afterEach(cleanup)

describe("something", () => {
  test("render role", () => {
    expect(queryByRole(document.body, "figure")).toBeNull()

    render(<Something />)

    expect(queryByRole(document.body, "figure")).toBeTruthy()
  })
})

// index.tsx

export const Something = () => <div role="figure" />

Problem description:

Basically, tests are passing, but TypeScript complains that queryByRole expects from 3-4 arguments and it's getting 2.

According to your typings, that seems expected though:

• https://github.com/kentcdodds/dom-testing-library/blob/master/typings/queries.d.ts#L64
• https://github.com/kentcdodds/dom-testing-library/blob/master/typings/query-helpers.d.ts#L7-L12

The first argument QueryAttribute expects is attribute: string;, but that doesn't make sense because the attribute I want is already expressed by queryByRole (which is role).

Same happens with queryByAltText. i.e.:

Suggested solution:

My suggested solution is to better design these interfaces to properly fit to the signatures of these methods that already have an explicit attribute. I can create a PR for that, just want to make sure if I'm not daydreaming or something.

Thanks!

[chiefGui]

Also, as you can see here, queryByRole is implemented by automatically binding the role attribute. So I guess I'm not daydreaming, hah.

[JeffBaumgardt]

I think that's my bad I did not update the typescript definitions when I added role since I'm not as versed as TS. I will look at adding that today.

[JeffBaumgardt]

I take that back someone did add the typings from what I can tell. As seen here. I will need help from someone who knows more about TS to help troubleshoot. Perhaps @jenovs might be of assistance here.

[jenovs]

I'm still learning the ropes of TS and my PR just removed redundant letter T from typings' names so they'll align with the function names.
And as I only used getByRole in my code I didn't notice any other problems (but I now checked queryByRole and can confirm that TS complains about missing arguments).

[chiefGui]

Well, I can create a PR this weekend to align these typing issues if you want. Just let me know your plans.

Thank you for the attentions guys!

[JeffBaumgardt]

You are welcome to. Like I said I would help out more if I knew TS more. I just used the annotations that everyone else was using. 😄

[kentcdodds]

🎉 This issue has been resolved in version 3.12.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀