jest-native icon indicating copy to clipboard operation
jest-native copied to clipboard

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

Open jorgearuv opened this issue 3 years ago • 6 comments

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

Screen Shot 2021-12-23 at 4 46 12 p m

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?

jorgearuv avatar Dec 23 '21 23:12 jorgearuv

Same here image

princealirehman1 avatar Jan 20 '22 11:01 princealirehman1

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'],
};

flo-sch avatar Feb 24 '22 13:02 flo-sch

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).

friederbluemle avatar Feb 24 '22 18:02 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

zhiqingchen avatar Mar 09 '22 14:03 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

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.

friederbluemle avatar Mar 09 '22 22:03 friederbluemle

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

roni-castro avatar Jun 23 '22 00:06 roni-castro

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.

mdjastrzebski avatar Sep 30 '22 10:09 mdjastrzebski

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

alexamy avatar Dec 14 '22 23:12 alexamy

@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.

mdjastrzebski avatar Dec 15 '22 19:12 mdjastrzebski

New issue: https://github.com/testing-library/jest-native/issues/136

alexamy avatar Dec 15 '22 22:12 alexamy

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

PSainz avatar Sep 14 '23 16:09 PSainz

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'

marocas avatar Jan 17 '24 18:01 marocas