Property 'toHaveStyle' does not exist on type 'JestMatchers<any>'

[jorgearuv]

I've just installed jest-native and when I try to use toHaveStyle() I got this error:

This is the complete example:

const commonStyles: TextStyle = {
  fontFamily: 'ProximaNova',
  fontSize: 14,
  lineHeight: 20,
  color: getColor('gray-100'),
}

describe('TextInfo', () => {
  it('should render the given text with default styles', () => {
    const { getByText } = render(<TextInfo>{sampleText}</TextInfo>)
    expect(getByText(sampleText)).toHaveStyle(commonStyles)
    expect(getByText(sampleText)).toBeTruthy()
  })

  it('should render the given text with custom styles', () => {
    const { getByText } = render(
      <TextInfo style={{ marginBottom: 8 }}>{sampleText}</TextInfo>,
    )
    expect(getByText(sampleText)).toHaveStyle({
      ...commonStyles,
      marginBottom: 8,
    })
    expect(getByText(sampleText)).toBeTruthy()
  })
})

How can I get rid off this error?

[princealirehman1]

Same here

[flo-sch]

It seems like referencing this library directly from within the jest config causes the types not to be loaded. I guess this is how jest & TypeScript together works, not sure if there is a way to automatically fix it.

But a simple workaround is to point the script to a TypeScript file that just imports the library:

Change from this:

// jest.config.js
module.exports = {
  // [...]
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};

To this:

// jest.setupFilesAfterEnv.ts
import '@testing-library/jest-native/extend-expect'

// jest.config.js
module.exports = {
  // [...]
  setupFilesAfterEnv: ['<rootDir>/jest.setupFilesAfterEnv.ts'],
};

[friederbluemle]

Related: #7

One more thing worth mentioning (in case it wasn't obvious):

Make sure the test setup file ends in .ts (or .tsx), and is not excluded in the default tsconfig used by your IDE (e.g. by sitting in a directory that is part of exclude in tsconfig.json).

[zhiqingchen]

Related: #7

One more thing worth mentioning (in case it wasn't obvious):

Make sure the test setup file ends in .ts (or .tsx), and is not excluded in the default tsconfig used by your IDE (e.g. by sitting in a directory that is part of exclude in tsconfig.json).

it works, but it will cause setup.ts to be builded

[friederbluemle]

Related: #7
One more thing worth mentioning (in case it wasn't obvious):
Make sure the test setup file ends in .ts (or .tsx), and is not excluded in the default tsconfig used by your IDE (e.g. by sitting in a directory that is part of exclude in tsconfig.json).

it works, but it will cause setup.ts to be builded

That's correct. If your project is published and you want to only ship compiled source files (not tests or setup.ts), then you would need two separate tsconfig.json files. For example, one tsconfig.release.json extending tsconfig.json, which excludes tests. In your package.json you'd have a build script like: tsc -p tsconfig.release.json. Your IDE will pick up tsconfig.json which includes tests to function properly.

[roni-castro]

This problem also happened with me when I added "include": ["src/**/*"] to the tsconfig.json

[mdjastrzebski]

Closing as stale.

@jorgeruvalcaba If the issue persists with the latest release v5.0.0. Please submit a new issue with minimal repro repository. For our convenience please use examples/basic from React Native Testing Library as a base for the PR.

[alexamy]

Have the same problem. Using jest-expo and typescript test file with explicit jest import.
Suggested solution doesn't work.

[mdjastrzebski]

@alexamy Please submit a new issue with minimal repro repository. For convenience please use examples/basic from React Native Testing Library as a base for the PR.

[alexamy]

New issue: #136

[PSainz]

Try adding import '@testing-library/jest-dom' to your test file, it’s what got rid of the error for me.

[marocas]

In my case, I just converted the jest.config.js to jest.config.ts and instead of required('@testing-library/jest-dom') import '@testing-library/jest-dom'.

// jest.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  ...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  ...
}

// jest.setup.ts
import '@testing-library/jest-dom'