Jest-dom give the error "TypeError: expect(...).toHaveStyle is not a function"

Question

I'm trying to use jest-dom to test a component's styles, and I'm having the error:

"TypeError: expect(...).toHaveStyle is not a function"

My component is a simple link with styled-components:

import styled from 'styled-components'

export const Link = styled.a`
  color: #fff;
`

In my test I'm doing:

describe('Link', () => {
  it('should display color on the link', () => {
    render(<Link href="/x">Test</Link>)
  }

  expect(screen.getByRole('link', { name: /test/i })).toHaveStyle({ color: '#fff' })
}

I created a settings file (jest.config.js) with:

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

At the root of the project I created the .jest / setup.js file and imported the js-dom:

import '@testing-library/jest-dom'

Answer 1

you can try this :

import { toHaveStyle } from '@testing-library/jest-dom'
expect.extend({ toHaveStyle })

it works for me.

Answer 2

Since @testing-library/dom v5.0.0, there are some breaking changes compare/v4.2.4...v5.0.0

Before v5.0.0, you should use import '@testing-library/jest-dom/extend-expect';

Since v5.0.0, you should use import '@testing-library/jest-dom';

You didn't add the matchers for expect correctly. That's the reason you get the error.

Answer 3

install jest-styled-components

npm i -D install jest-styled-components

then use .toHaveStyleRule

Example:

import React from 'react';
import { render } from 'react-testing-library';
import Button from '../Button';

import 'jest-styled-components';

describe('<Button />', () => {
  it('should render text', () => {
    const { getByText } = render(<Button text="Button" />);
    expect(getByText('Button')).not.toBeNull();
  });

  it('should have correct style with background color', () => {
    const { getByText } = render(<Button text="Button" color="#fff" />);
    expect(getByText('Button')).toHaveStyleRule('background', '#fff');
  });
});

Answer 4

Use the following versions in your package:

"dependencies": {
 "@types/styled-components": "5.9.1",
 "styled-components": "^5.2.0"

},

and import this package into your test file:

import '@testing-library/jest-dom/extend-expect'

Answer 5

From https://testing-library.com/docs/svelte-testing-library/setup/

6.2 Add the following to your Jest configuration in package.json

{
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
}

You could add it to your jest.config.js since you already have that, rather than package.json.

Answer 6

I found the answer from this link

To be short:

1. Run: npm install --save-dev @testing-library/jest-native
2. Add: import '@testing-library/jest-native/extend-expect' to your test file
3. Add: import { toHaveStyle } from '@testing-library/jest-native/dist/to-have-style'
4. Add: expect.extend({toHaveStyle})
5. Finally, you have the toHaveStyle for your expect

Sample code:

/**
 * @format
 */

import 'react-native';
import '@testing-library/jest-native/extend-expect';
import React from 'react';
import App from '../App';

import {render, screen} from '@testing-library/react-native';
import { toHaveStyle } from '@testing-library/jest-native/dist/to-have-style';

expect.extend({toHaveStyle})

it('renders correctly', () => {
    render(<App/>);

    const text = screen.getByTestId('Sample Text')
    expect(text).not.toBeNull();

    const button = screen.getByTestId('Sample Button')
    expect(button).not.toBeNull();
    expect(button).toHaveStyle({
        backgroundColor: 'transparent'
    })
});