toHaveStyle with react-native-testing-library

[sammysium]

Given the clear examples given on toHaveStyle, I am thinking the component is not supported. Basically, my custom component outputs Icon (react-native-vector-icons) based on some props. It takes one color and runs some logic to chose the background color. I prefer to test the style that is applied on the component now, which according to react-native-vector-icons is the same as Text component:

       const IconComponent =(props) => {
       const backgroundColor = setColor(props.color);
       return (<Icon testID="icon" name={props.name} color={props.color} backgroundColor={backgroundColor}/>
        }

test:

   import { render } from 'react-native-testing-library';
    const wrapper = render(
      <IconComponent  name="search" color="#00f" />
    );
    const element = wrapper.getByTestId('icon');

    expect(element).toHaveStyle({
      color: '#00f'
    });

 but it gives the following error:

❓ React Testing Library Resources

• Discord https://discord.gg/c6JN9fM
• Stack Overflow https://stackoverflow.com/questions/tagged/react-testing-library

❓ Testing Library Resources

• Stack Overflow https://stackoverflow.com/questions/tagged/native-testing-library

ISSUES WHICH ARE QUESTIONS WILL BE CLOSED

[brunohkbx]

@sammysium wouldn't be better to use the matcher toHaveProp in this case?

[AlanSl]

@brunohkbx not if you want to test text style inheritance. For example, I'm trying to write tests for elements intended to be used inline within <Text> and I want the tests to ensure that in a variety of nesting scenarios, the correct styles are inherited and overridden.

To give a simple example, to test that this Link component resolves as red and bold:

<Paragraph weight="bold" color="blue">
  This is some bold blue text containing a
    <Link color="red"> red link</Link>
  , nested inside it.
</Paragraph>

// render --> debug() shows this:
<Text style={{ fontWeight: 'bold', color: 'blue' }}>
  <Text {...link stuff} style={{ color: 'red' }} />
</Text>
// Link is bold in app because of inheritance; can't see that in the style prop 

And of course, even without nesting and inheritance, to use toHaveProp with the style prop, you need to supply all the keys and values of the style prop, not just the one(s) you want to test for.

This test will test that this is the only style value and will break if any other style is added:

  expect(element).toHaveProp('style', {
    color: '#00f'
  })

[AlanSl]

Here's an example failing case. In an app, the text is red and bold due to text style inheritance, but Jest doesn't see it that way:

test('nested text where parent has a style', () => {
  const { getByText } = render(
    <Text style={{ color: 'red' }}>
      This is
      <Text style={{ fontWeight: 'bold' }}> some text </Text>
      that was nested
    </Text>
  )
  const text = getByText(' some text ')
  // this fails, doesn't see any color style
  expect(text).toHaveStyle({ color: 'red' })
})

If the style is set directly on that element, the tests pass:

test('nested text where parent has no style', () => {
  const { getByText } = render(
    <Text>
      This is
      <Text style={{ color: 'blue' }}> some text </Text>
      that was nested
    </Text>
  )
  const text = getByText(' some text ')
  // this passes
  expect(text).toHaveStyle({ color: 'blue' })
})

test('nested text where parent and child have the style', () => {
  const { getByText } = render(
    <Text style={{ color: 'red' }}>
      This is
      <Text style={{ color: 'blue' }}> some text </Text>
      that was nested
    </Text>
  )
  const text = getByText(' some text ')
  // this passes
  expect(text).toHaveStyle({ color: 'blue' })
})

[mdjastrzebski]

Closing as stale.

@sammysium If the issue persists with the latest versions of RNTL & JN, please submit a new issue with minimal repro repository. For overall convenience please use examples/basic from React Native Testing Library as a base for such PR.