Skip to content

Conversation

@ACR1209
Copy link

@ACR1209 ACR1209 commented Jun 2, 2025

Description

This PR adds the toHaveStyle matcher for the React Native module

@ACR1209 ACR1209 requested a review from suany0805 June 2, 2025 17:23
@ACR1209 ACR1209 requested a review from suany0805 September 2, 2025 18:07
Copy link
Contributor

@suany0805 suany0805 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Just left a question :)

* @example
* ```
* expect(element).toHaveStyle({ backgroundColor: "red" });
* expect(element).toHaveStyle([{ backgroundColor: "red" }]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we allowing an array of styling objects in here? 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because you can have an array of styles on React Native for styling 😄

Snippet from the Style docs of supported style prop values

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants