We have a React Native app, and have trouble in Jest testing this:
import React from 'react';
import { render } from '@testing-library/react-native';
import MyScreen from '../../../../../src/screens/MyScreen/index';
import Provider from '../../../../__helpers__/Provider';
import { t } from 'core/utils';
import '@testing-library/jest-dom';
jest.mock('@react-navigation/native', () => {
return {
...jest.requireActual('@react-navigation/native'),
useNavigation: () => ({
navigate: jest.fn(),
}),
};
});
jest.mock('@react-navigation/core', () => {
return {
...jest.requireActual('@react-navigation/core'),
useFocusEffect: () => ({
navigate: jest.fn(),
}),
};
});
describe('<AddEditSchedulable />', () => {
it('tests a button is disabled', () => {
const myProperty = {
myData: 'myData'
};
const myRender = render(
Provider(() => <MyScreen myProperty={myProperty} />),
);
const button = myRender.getByText(t('common.buttons.save')); // Returns a complex "_fiber" object.
expect(button).toBeDisabled(); // Expects an HTML element.
});
});
The button returned by getByText contains an object we dont understand containing lots of "_fiber" objects. From this I think we need to get HTML elements to correctly use the toBeDisabled function, but this is React Native and I dont think it uses HTML elements under the hood.
So can we either, get HTML elements from React Native, or can we get functions that understand React Native elements that have the functionality we need (at least accessing properties, ie "disabled")?
We are in circles because standard React seems very different to React Native in Jest tests.