TypeError: expect(...).toHaveStyleRule is not a function - React Native

[isacjunior]

Error

    TypeError: expect(...).toHaveStyleRule is not a function

       7 |   const tree = shallow(<Button />)
       8 |   expect(tree).toMatchSnapshot()
    >  9 |   expect(tree).toHaveStyleRule('color', 'black')
         |                ^
      10 | })
      11 |

jest.config.js

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
  },
  modulePaths: [
    'src',
  ],
  setupFiles: [
    '<rootDir>/src/core/unit-test/setup.js',
  ],
  moduleNameMapper: {
    'styled-components': '<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js',
    '^components(.*)$': '<rootDir>/src/components$1',
  },
  snapshotSerializers: ['enzyme-to-json/serializer'],
  modulePathIgnorePatterns: ['<rootDir>/e2e'],
  collectCoverageFrom: ['src/components/**/*.js', 'src/containers/**/*.js', 'src/core/**/*.js'],
  moduleFileExtensions: ['ios.js', 'native.js', 'js', 'json', 'jsx', 'node'],
}

Dependencies

  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "styled-components": "^3.4.4"
  },
  "devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.6",
    "babel-jest": "23.4.2",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-react-native": "^5.0.2",
    "detox": "^8.1.6",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "enzyme-to-json": "^3.3.4",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "jest": "23.5.0",
    "jest-styled-components": "^6.1.1",
    "react-dom": "^16.4.2",
    "react-test-renderer": "16.4.1"
  },

Button without wrapper Component

import styled from 'styled-components'

const ButtonStyled = styled.View`
  color: black;
`

export default ButtonStyled

Button test

import React from 'react'
import { shallow } from 'enzyme'
import Button from '../styled'
import 'jest-styled-components/native'

test('it works', () => {
  const tree = shallow(<Button />)
  expect(tree).toMatchSnapshot()
  expect(tree).toHaveStyleRule('color', 'black')
})

[sebas-bytelion]

any update ?

[paramsinghvc]

Still the error. There's no definitive guide on usage with react testing library. All the examples are using enzyme which no one uses!

[Kureev]

👋 Hi there!

Yeah, all examples use Enzyme, because that's what people used two years ago, when the examples were written. At the moment when this issue has been created, react-testing-library was not a thing yet.

Speaking of the issue itself, it's been awhile since I've been contributing to the OSS and even longer since I've used this assertion (.toHaveStyleRule) for the last time in my code. I'm not sure that after of two years I still remember how it works and will have passion to fix this for the latest version of React Native and/or update documentation for React Testing Library.

Maybe someone who's interested in the issue will find some time to contribute to the project and fix the matcher for the latest version of React Native? Preferably along with the docs?