I am working with a React Native button component that consists of its own index.js and styles.js files. The content of styles.js is as follows:
import { StyleSheet } from "react-native";
export default StyleSheet.create({
container: {
borderRadius: 2
},
button: {
borderRadius: 2
}
});
While creating a unit test for this button component, the code coverage on styles.js shows as 0%. Surprisingly, Jest does not throw any error even though it does not meet the 80% coverage threshold I have set.
Out of curiosity, I decided to assign the StyleSheet to a constant and export it instead. This resulted in the following version of styles.js:
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
borderRadius: 2
},
button: {
borderRadius: 2
}
});
export default styles;
To my surprise, when running Jest coverage report again, it now displayed 100% coverage. What could be the reason behind this sudden change? Am I missing something or doing something incorrectly?