This series covers testing React Native apps with Jest and Testing Library. In our past tutorial, we went over testing text and a button. In this tutorial, we will go over Testing Styles in your React Native app.
Seriers Outline:
- Part I: Setting Up
- Part II: Writing the First Test
- Part III: Testing for an Element That Isn’t Present
- Part IV: Button Testing
- Part V: Testing Styles of a Component – Current Article
- Part VI: Functional Testing
- Part VII: Further Helpful Information
Let’s Dig In
With everything we’ve added over the past parts in the series, here is our App.js code so far:
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
const App = () => {
return (
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Hello World!</Text>
</View>
<Button
title="Press me!"
onPress={() => {}}
testID="pressMeButton"
accessibilityLabel="Press me"
/>
/View>
);
};
const styles = StyleSheet.create({
body: {
backgroundColor: '#ffffff',
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: '#000000',
},
});
export default App;
And here is what the app should look like:
While not the most awesome design, our focus is on testing. We should be able to apply this tutorial to any design.
Our First Styles Test
Let’s first create a new test.
Open up App.test.js, and add a new test after should find the button title.
it('should match the body style', () => {
const {getByTestId} = render(<App />);
const foundBodyElement = getByTestId('body');
});
As you can see, we are finding an element using getByTestId.
In App.js, add testID='body' where we currently have style={styles.body}.
Now, App.js should look like this:
...
const App = () => {
return (
<View style={styles.body} testID='body'>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Hello World!</Text>
</View>
<Button
title='Press me!'
onPress={() => {}}
testID='pressMeButton'
accessibilityLabel='Press me'
/>
</View>
);
};
...
Great! Good work. Now, it’s time to test the style where we have testID='body'.
Add the follow code to our should match the body style test:
//...
expect(foundBodyElement.props.style.backgroundColor).toEqual('#ffffff');
//...
If using yarn, run yarn test -u. If using NPM, run npm test -u
You should see:
Congratulations on writing your first style test! You’re ~style-tastic~!
If you didn’t notice, we included -u in our tests above. This ran the tests, as well update the snapshot.
When we find an element, this time using foundBodyElement, we have access to different props. In previous tutorials, we used it to test text. In this case, we use it to test styles.
Using toHaveStyle
In our tests above, we were drilling down to get to our styles. There is actually an easier way to do this. By using toHaveStyle, we can test styles similar to the way we declare them.
Setting up toHaveStyle
In App.test.js, add the following code after the other imports.
//...
import { toHaveStyle } from "@testing-library/jest-native";
//...
We we have to extend except to use toHaveStyle.
//...
describe("App", () => {
expect.extend({ toHaveStyle });
//..
});
Add a Test Using toHaveStyle
To add the test, open App.test.js and add the following test.
//...
it('should match the sectionTitle style', () => {
const {getByText} = render(<App />);
const foundSectionTitle = getByText('Hello World!');
expect(foundSectionTitle).toHaveStyle({
fontSize: 24,
fontWeight: '600',
color: '#000000'
});
});
//...
Run the tests!
You should see:
That seemed easier, right?! Especially when we have multiple styles to test, this method is the right choice.
If we didn’t use toHaveStyle, we would need to drill down to each style to test them. With toHaveStyle we should be able to test any style the same way we declare it.
Summary
In summary, we started this post by Testing Styles by drilling down. Next we added toHaveStyle. Finally, we tested using the aforementioned function. Nice work!
In our next tutorial, we will go over Functional Testing.
[Editor’s Note: Never miss a post by subscribing to receive new blogs by email. No spam, opt-out anytime.]
