编写单元测试以检查应用程序是否在 react-native 中脱机

Question

I have the following component which displays a text on the app if the app is offline.

import React from 'react';

import { useNetInfo } from '@react-native-community/netinfo';

import { Label } from 'components/ui';

const OfflineNotice = () => {
  const netInfo = useNetInfo();

  if (netInfo.type !== 'unknown' && netInfo.isInternetReachable === false) {
    return <Label size={18} text='No Internet Connection' />;
  }

  return null;
};

export default OfflineNotice;

I want to write a unit test to this to check if this works properly. How can I do this? Im new to unit tests. I don't understand how to mock this.

I use typescript and testing-library/react-native.

UPATED: Why does this first test fail? It should NOT TO BE NULL. But it fails. The error is,

OfflineNotice component › test

expect(received).not.toBeNull()

Received: null

  15 | 
  16 |     const { queryByText } = render(<OfflineNotice />);
> 17 |     expect(queryByText(/no internet connection/i)).not.toBeNull();
     |                                                        ^
  18 |   });
  19 | 

  at Object.<anonymous> (src/components/offline-notice/offline-notice.test.tsx:17:56)

Answer 1

Cruising the react-native-netinfo github repo, troubleshooting section

You should then add the following to your Jest setup file to mock the NetInfo Native Module:

 import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js'; jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);

Their mock for testing is:

const defaultState = {
  type: 'cellular',
  isConnected: true,
  isInternetReachable: true,
  details: {
    isConnectionExpensive: true,
    cellularGeneration: '3g',
  },
};

const RNCNetInfoMock = {
  configure: jest.fn(),
  fetch: jest.fn(),
  addEventListener: jest.fn(),
  useNetInfo: jest.fn(),
};

RNCNetInfoMock.useNetInfo.mockResolvedValue(defaultState);

Given this I think you could craft your own mock resolved values in each unit test case:

import { useNetInfo } from '@react-native-community/netinfo';

jest.mock('@react-native-community/netinfo', () => {
  useNetInfo: jest.fn(),
});

...

// Happy path test, known type and internet unreachable
useNetInfo.mockResolvedValueOnce({
  type: 'test', // not 'unknown'
  isInternetReachable: false,
});
// assert render non-null
const { queryByText } = render(<OfflineNotice />);
expect(queryByText(/no internet connection/i)).not.toBeNull();

...

// Sad path test, known type and internet reachable
useNetInfo.mockResolvedValueOnce({
  type: 'test', // not 'unknown'
  isInternetReachable: true,
});
// assert render null
const { queryByText } = render(<OfflineNotice />);
expect(queryByText(/no internet connection/i)).toBeNull();

...

// Sad path test, unknown type and internet unreachable
useNetInfo.mockResolvedValueOnce({
  type: 'unknown',
  isInternetReachable: false,
});
// assert render null
const { queryByText } = render(<OfflineNotice />);
expect(queryByText(/no internet connection/i)).toBeNull();

...

// Sad path test, unknown type and internet reachable
useNetInfo.mockResolvedValueOnce({
  type: 'test', // not 'unknown'
  isInternetReachable: true,
});
// assert render null
const { queryByText } = render(<OfflineNotice />);
expect(queryByText(/no internet connection/i)).toBeNull();

React-Native-Testing-Library

React-Testing-Library

• Query Cheetsheet
• Text Match Options

Answer 2

Now my tests are working. But it gives the unexpected outputs.

COMPONENT:

import React from 'react';

import { useNetInfo } from '@react-native-community/netinfo';

import { Label } from 'components/ui';
import strings from './offline-notice.strings';
import styles from './offline-notice.styles';

const OfflineNotice = ({ style, text }: IProps) => {
  const netInfo = useNetInfo();

  if (netInfo.type !== 'unknown' && netInfo.isInternetReachable === false) {
    return <Label size={18} style={[styles.label, style]} text={text} />;
  }

  return null;
};

OfflineNotice.defaultProps = {
  text: strings.NO_INTERNET_CONNECTION,
};

interface IProps {
  style?: Object;
  text?: string;
}

export default OfflineNotice;

TEST:

import { render } from '@testing-library/react-native';
import React from 'react';

import { useNetInfo } from '@react-native-community/netinfo';

import OfflineNotice from './offline-notice.component';
import strings from './offline-notice.strings';

describe('OfflineNotice component', () => {
  it('should display the message if internet is not reachable', () => {
    useNetInfo.mockResolvedValueOnce({
      type: 'test',
      isInternetReachable: false,
    });

    const { getByText } = render(<OfflineNotice text={strings.NO_INTERNET_CONNECTION} />);
    expect(getByText(strings.NO_INTERNET_CONNECTION)).not.toBeNull();
  });

  it('should not display the message if internet is reachable', () => {
    useNetInfo.mockResolvedValueOnce({
      type: 'test',
      isInternetReachable: true,
    });

    const { getByText } = render(<OfflineNotice text={strings.NO_INTERNET_CONNECTION} />);
    expect(getByText(strings.NO_INTERNET_CONNECTION)).toBeNull();
  });
});

Jest.Setup.ts

import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';

jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);

When running the test, following output is given. What am I doing wrong here?

Answer 3

As @Drew said, I set the configuration according by documentation , but I did a little difference in mock for testing.

For me, I did this and worked:

jest.mock('@react-native-community/netinfo', () => ({
  ...jest.requireActual('@react-native-community/netinfo'),
  useNetInfo: () => ({
    isConnected: true,
  })
}));