Jest-styled-components: Property 'toHaveStyleRule' does not exist on type 'JestMatchersShape<Matchers<void, HTMLElement>, Matchers<Promise<void>, HTMLElement>>'.

[esetnik]

src/setupTests.ts

import '@testing-library/jest-dom/extend-expect';
import 'jest-styled-components';

__tests__/Component.tsx

import styled from 'styled-components/macro';

const TestComponent = styled.div``;

test.skip('becomes active when hovered', () => {
  const handleClick = jest.fn();
  const route = '/';
  const name = 'Test Nav Item';
  const { getByTestId } = render(<TestComponent data-testid="nav-item" />);

  const navItem = getByTestId('nav-item');
  fireEvent.mouseOver(navItem);

  expect(navItem).toHaveStyleRule('background-color', theme.navBlue);
});

Error:

Property 'toHaveStyleRule' does not exist on type 'JestMatchersShape<Matchers<void, HTMLElement>, Matchers<Promise<void>, HTMLElement>>

Strangely enough if I create a file with the exact same type definition then I get no error. For some reason Typescript is unable to augment jest.Matchers interface when importing jest-styled-components directly.

types/jest-styled-components.d.ts

declare namespace jest {
  interface AsymmetricMatcher {
    $$typeof: Symbol;
    sample?: string | RegExp | object | Array<any> | Function;
  }

  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;
  }
}

[esetnik]

Looking at @testing-library/jest-dom they have solved the problem a different way using a dedicated import extend-expect. See https://github.com/testing-library/jest-dom/blob/master/extend-expect.d.ts

[zaffron]

I am also currently stuck in this. Did you found any answers to this? Someone has already faced the problem and a temporary solution could be this https://github.com/styled-components/jest-styled-components/issues/264

[mbrowne]

It seems that the issue started with this fix:
https://github.com/styled-components/jest-styled-components/commit/6931b6587ee7cedb7c1aea755ca8e73819f814f6

Seems like it might be a TypeScript bug since it works fine without the export statement at the bottom of types/jest-styled-components.d.ts

[landisdesign]

It looks like the issue is the import/export commands turned this global declaration file into a module declaration file. That prevents the namespace declaration from being exposed and joined to the public jest namespace.

If I create a new index.d.ts file in jest-styled-components/serializer, and move the import and export statements there, the jest declaration is exposed again and the issue is cleared.

In addition, it seems to resolve the original issue in #259. As it is now, I get TS errors attempting to import the serializer. Moving it into this new file clears both sets of errors.

[hutber]

I'm getting the same error :(

[tobilen]

i've created a branch that solves this issue that is a bit smaller in scope compared to @landisdesign s work: https://github.com/styled-components/jest-styled-components/pull/308

[landisdesign]

@tobilen This is great! I'm glad there was a way around this that didn't break the existing API. I'm going to have to remember this for the future.