Jest-styled-components: toHaveStyleRule types not being added to jest globally on typescript

[pragmaticivan]

using: import "jest-styled-components/native";

message: Property 'toHaveStylerule' does not exist on type 'Matchers'

[p-sebastian]

Had the same problem, fixed it with this:

create a folder in your root with this structure

./@types/jest-styled-components/native/index.d.ts

index.d.ts

declare namespace jest {
  interface AsymmetricMatcher {
    $$typeof: Symbol
    sample?: string | RegExp | object | Array<any> | Function
  }
  // throws an error because the non native version has it also defined, so just comment it
  // type Value = string | number | RegExp | AsymmetricMatcher | undefined

  interface Options {
    media?: string
    modifier?: string
    supports?: string
  }

  interface Matchers<R> {
    toHaveStyleRule(property: string, value?: Value, options?: Options): R
  }
}

Then add that folder to be read by typescript in your tsconfig.json

tsconfig.json

{
   "compilerOptions": {
        "typeRoots": ["./@types"]
    }
}

[CarlGranstrom]

Thanks, @p-sebastian! One question though, as it resolved the toHaveStyleRule issue, it seems like I lost my jest types (fails on things like expect, describe, it etc). Any suggestions on how to proceed?

[byCedric]

Same issue here, looks like typescript is also looking for a /native typing when importing with /native. It also might be worth to take a look how styled components is fixing this 😄

For now, I used the same approach as @p-sebastian but also reusing the existing types.

1. Create types folder
2. Create file named jest-styled-components.d.ts
3. Put this in that file: export * from 'jest-styled-components';

You might need to configure your TypeScript to include your types folder.

[mkurczewski]

None of the above worked for me 😞, however I figured out how to make a workaround.

1. Create extend-expect.d.ts file and place it in project's root (or wherever you want) with the following content:

   // tslint:disable:no-namespace
   declare namespace jest {
     interface Matchers<R> {
       toHaveStyleRule: import("node_modules/jest-styled-components/typings/index.d.ts").jest.Matchers["toHaveStyleRule"]
     }
   }
   

   The // tslint:disable:no-namespace line depends on your tslint settings (if you're using it).

2. Add another path in tsconfig.json's include array, which will be a relative path to the file created in pt. 1, e.g.:

   "include": ["./src", "./test", "./mocks", "./extend-expect.d.ts"],
   

   You can also put the extend-expect.d.ts in existing and already included folder like src so you could omit adding a dedicated path for this particular file.

[felipesousa]

@mkurczewski thanks a lot, that solution works to me!

[angeloashmore]

@mkurczewski Thanks, works for me as well with the following fix (the R generic needs to be forwarded to Matchers):

declare namespace jest {
  interface Matchers<R> {
    toHaveStyleRule: import("jest-styled-components").jest.Matchers<R>["toHaveStyleRule"]
  }
}

[aquinq]

toHaveStyleRule definition seems now to be located in node_modules/jest-styled-components/typings/index.d.ts.
in the end, I just needed to add

import 'jest-styled-components';

to my existing src/types/index.d.ts file.