Typescript error "does not satisfy the constraint 'Queries'

[manakuro]

• react-native or expo: react-native
• native-testing-library version: ^4.0.2
• jest-preset: @testing-library/react-native
• react-native version: 0.59.8
• node version: v11.10.1

Relevant code or config:

__test__/App.spec.tsx

import 'react-native'
import React from 'react'
import App from 'app/src/App'

import { render } from '@testing-library/react-native'

it('renders correctly', () => {
  const { baseElement } = render(<App />)
  expect(baseElement).toMatchSnapshot()
})

What you did:

Rendered a component and use toMatchSnapshot.

What happened:

TypeScripts error occurred.

node_modules/@testing-library/react-native/typings/get-queries-for-element.d.ts:31:58 - error TS2344: Type 'typeof import("/Users/me/workspace/react-native/react-native-sample/node_modules/@testing-library/react-native/typings/queries")' does not satisfy the constraint 'Queries'.
  Property 'getByHintText' is incompatible with index signature.
    Type 'GetByBoundProp' is not assignable to type 'Query'.
      Type 'Pick<ReactTestInstance, "children" | "type" | "props" | "parent" | "find" | "findAll">' is not assignable to type 'Error | ReactTestRenderer | ReactTestRenderer[] | Promise<ReactTestRenderer[]> | Promise<ReactTestRenderer> | null'.
        Type 'Pick<ReactTestInstance, "children" | "type" | "props" | "parent" | "find" | "findAll">' is missing the following properties from type 'ReactTestRenderer[]': length, pop, push, concat, and 27 more.

31 export function getQueriesForElement<T extends Queries = typeof queries>(
                                                            ~~~~~~~~~~~~~~

node_modules/@testing-library/react-native/typings/index.d.ts:26:46 - error TS2344: Type 'typeof import("/Users/me/workspace/react-native/react-native-sample/node_modules/@testing-library/react-native/typings/queries")' does not satisfy the constraint 'Queries'.
  Property 'getByHintText' is incompatible with index signature.
    Type 'GetByBoundProp' is not assignable to type 'Query'.
      Types of parameters 'testRenderer' and 'testRenderer' are incompatible.
        Type 'ReactTestRenderer | Pick<ReactTestInstance, "children" | "type" | "props" | "parent" | "find" | "findAll">' is not assignable to type 'ReactTestRenderer'.
          Type 'Pick<ReactTestInstance, "children" | "type" | "props" | "parent" | "find" | "findAll">' is missing the following properties from type 'ReactTestRenderer': toJSON, toTree, unmount, update, and 2 more.

26 export type RenderResult<Q extends Queries = typeof queries> = {
                                                ~~~~~~~~~~~~~~

node_modules/@testing-library/react-native/typings/index.d.ts:35:52 - error TS2344: Type 'typeof import("/Users/me/workspace/react-native/react-native-sample/node_modules/@testing-library/react-native/typings/queries")' does not satisfy the constraint 'Queries'.

35 export interface RenderOptions<Q extends Queries = typeof queries> {
                                                      ~~~~~~~~~~~~~~

node_modules/@testing-library/react-native/typings/query-helpers.d.ts:7:18 - error TS2430: Interface 'SelectorMatcherOptions' incorrectly extends interface 'MatcherOptions'.
  Types of property 'selector' are incompatible.
    Type 'string | undefined' is not assignable to type 'SelectorFn | undefined'.
      Type 'string' is not assignable to type 'SelectorFn | undefined'.

7 export interface SelectorMatcherOptions extends MatcherOptions {
                   ~~~~~~~~~~~~~~~~~~~~~~

node_modules/@testing-library/react-native/typings/query-helpers.d.ts:12:13 - error TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?

12   getProp: (string) => NativeTestInstance;
               ~~~~~~


Found 5 errors.

Reproduction:

Problem description:

Cannot compile it.

Suggested solution:

I temporarily skip typing check using paths option in tsconfig.json and create types/@testing-library/react-native.d.ts like this:

tsconfig.json

"compilerOptions": {
  "paths": {"@testing-library/react-native": ["types/@testing-library/react-native.d.ts"]}
}

Could you please fix this typing error or give me any suggestions?

[lewie9021]

Hi @manakuro,

I've not personally used baseElement before, but judging by your intentions in the tests, you're probably after using the named export toJSON from the library like so:

import 'react-native'
import React from 'react'
import App from 'app/src/App'
import { render, toJSON } from '@testing-library/react-native'

it('renders correctly', () => {
  const { baseElement } = render(<App />)
  expect(toJSON(baseElement)).toMatchSnapshot()
})

If that doesn't work, try using container instead of baseElement - it's probably a better option for your use case:

import 'react-native'
import React from 'react'
import App from 'app/src/App'
import { render, toJSON } from '@testing-library/react-native'

it('renders correctly', () => {
  const { container } = render(<App />)
  expect(toJSON(container)).toMatchSnapshot()
})

Hope that helps!

[bcarroll22]

Thanks for jumping in Lewis 👍

@manakuro sorry for the delay. So, this one just looks like an issue with the typings actually. I’m not a typescript user myself, so would you mind helping out by creating a PR to fix the type issues you’re running into? I can support that effort however necessary to allow these to be correct 💯

After the typings are fixed, what you did should work. Until the typings are fixed, even what Lewis suggested won’t work without compile errors.

[manakuro]

Hi @lewie9021
Thank you for your suggestions. I tried to use container and toJSON as you said but there still are a typing error.

@bcarroll22 Hi, thank you for the reply. Okay I'll create a PR to fix it. 👍

Thank you for your guys help ！

[bcarroll22]

Awesome! Thanks for your help. I should be able to get it reviewed and merged today.

[aleph-naught2tog]

Hi, any update on this?

[manakuro]

Hi sorry for the late reply. I'm going to work on it this week.

[aleph-naught2tog]

@manakuro No worries at all, I just didn't see an update and was worried I'd missed something :)

[bcarroll22]

🎉 This issue has been resolved in version 4.0.3 🎉

The release is available on:

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

Your semantic-release bot 📦🚀