menu

Testing Library

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

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

You must wrap your Subscribe component with a Provider

July 8, 2019 at 10:38am

You must wrap your Subscribe component with a Provider

July 8, 2019 at 10:38am
Hi all I have the following component that I'm trying to test.
loading-screen.js
js
import * as React from 'react'
import { StyleSheet, ActivityIndicator, View, Text } from 'react-native'
import localize from '../../hocs/localize'
export const styles = StyleSheet.create({
...styles code
})
const LoadingScreen = ({ locale, style }) => (
<View testID="rntest-loading" style={[styles.host, style]}>
<View style={styles.message}>
<ActivityIndicator size="large" color="#979faa" />
<Text style={styles.label}>{locale.components.loading.label}</Text>
</View>
</View>
)
export default localize(LoadingScreen) // [ASK]: should I be instead importing that localize hoc function inside my test ?
loading-screen.test.js
import React from 'react'
// import { render, cleanup } from '@testing-library/react-native'
import { render, cleanup } from '../../../../test-utils/test-utils'
import LoadingScreen from '..'
beforeAll(cleanup)
test('it renders a LoadingScreen on to the document', () => {
const { getByTestId } = render(<LoadingScreen />)
const view = getByTestId('rntest-loading')
expect(view).toBeDefined()
})
This is the error message I get
FAIL src/components/loading-screen/__tests_/loading-screen.test.js
✕ it renders a LoadingScreen on to the document (12ms)
● it renders a LoadingScreen on to the document
You must wrap your <Subscribe> components with a <Provider>
I have followed the documentation from /react-native and wrapped everything inside the provider, but I don't know if I'm doing it correctly
import React from 'react'
import { render } from '@testing-library/react-native'
import * as Unstated from 'unstated'
// [NOTE] these are the hocs, that use the provider and subscribe
// import linkify from '../hocs/linkify'
// import localize from '../hocs/localize'
const ExternalProviders = ({ children }) => {
return (
<Unstated.Provider>
<Unstated.Subscribe to={[]}>{children}</Unstated.Subscribe>
</Unstated.Provider>
)
}
const customRender = (ui, options) => render(ui, { wrapper: ExternalProviders, ...options })
export * from '@testing-library/react-native'
export { customRender as render }
No messages yet