menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Team

Need help fixing some tests. My head is a bit fried. If some one could help

June 15, 2019 at 5:00pm

Need help fixing some tests. My head is a bit fried. If some one could help

June 15, 2019 at 5:00pm (Edited 3 months ago)

So I have the following component, that I need to complete tests for, but my head is a bit fried at the moment. If someone could give me a hint. I'm using @testing-library/jest-native/extend-expect and native-testing-library. Thanks

// @format
// @flow
import React from 'react'
import { StyleSheet, Text } from 'react-native'
import type { TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet'
import Touchable from '../core/touchable'
import Bubble, { styles as bubbleStyles } from '../chat-bubble'
import { colors, styles as globalStyles } from '../../shared'
const styles: { [string]: TextStyleProp } = StyleSheet.create({
text: {
color: colors.global.white,
textAlign: globalStyles.text.centerAlignment,
},
})
type ButtonProps = {
title: string,
style?: TextStyleProp,
}
const Button = ({ style, title, ...props }: ButtonProps) => {
const accessibilityTraits = ['button']
return (
<Touchable testID="rntest-touchable" {...props} {...{ accessibilityTraits }}>
<Bubble
testID="rntest-bubble"
gradient={{ from: colors.brand.primaryAlt, to: colors.brand.primary }}
orientation="right"
>
<Text testID="rntest-text" style={[bubbleStyles.text, styles.text]}>
{title}
</Text>
</Bubble>
</Touchable>
)
}
export default Button
button.test.js
// [ERROR]: Received has type: function Received has value: [Function bound ]
test('it renders accessibilityTraits on the Button', () => {
const { getByRole } = render(<Button accessibilityTraits />)
expect(getByRole).toBeDefined()
expect(getByRole).toHaveAttribute('button')
})
// [ERROR]: Received has type: function Received has value: [Function bound ]
test('it allows to add new accessibilityTraits on the Button', () => {
const newAccessabilityTrait = ['link']
const { getByRole } = render(<Button {...newAccessabilityTrait} />)
expect(getByRole).toHaveProp('accessible')
expect(getByRole).toHaveProp('accessibilityTraits', ['link', 'button'])
})
// [ERROR]: TypeError: TypeError: Cannot read property 'type' of undefined
test('it renders a Text as a child of the Bubble component', () => {
const { getByTestId } = render(<Button />)
expect(getByTestId('rntest-touchable').children[1].type).toBe('Text')
})
// [ERROR]: TypeError: Cannot read property 'includes' of undefined
test('it renders a Text with a title', () => {
const title = 'testTitle'
const matchRegex = /testTitle/i
const { getByText } = render(<Button title={title} />)
expect(getByText(title)).toMatch(matchRegex)
})

June 15, 2019 at 9:48pm

getByRole is a function, you need to call it with something and make the assertion on the return value

  • reply
  • like

try ...children[0]...

  • reply
  • like

not sure what the last test is for

  • reply
  • like

match should be used to match 2 strings, not a string and a component

  • reply
  • like

June 21, 2019 at 3:22pm

@wolverineks thanks, that fixed my first test, the last test actually takes care that the component has a prop title and that this one is defined, but i cannot make it pass.

Edited
  • reply
  • like

June 21, 2019 at 11:40pm

Your tests should not be testing props. That's an implementation detail. They should only test what the user sees. getByText is going to return a node that contains the provided text. If the test can't find a node with that text, the test fails. So, getByText(title) could be a test by itself.

  • reply
  • like