@testing-library/react-hooks#cleanup TypeScript Examples

The following examples show how to use @testing-library/react-hooks#cleanup. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: useFileReader.test.ts    From twilio-voice-notification-app with Apache License 2.0 6 votes vote down vote up 
describe('recipients list > useFileReader', () => {
  afterEach(() => cleanup());

  test('set parsed numbers correctly', async () => {
    await act(async () => {
      let { waitForNextUpdate } = renderHook(() =>
        useFileReader(selectedFile, setAlert, setParsedNumbers)
      );

      await waitForNextUpdate();

      await new Promise((r) => setTimeout(r, 200));

      expect(setParsedNumbers).toHaveBeenCalledWith([
        '+12025555555',
        '+12025555556',
        '+12025555557',
        '+12025555558',
      ]);
    });
  });
});
Example #2
Source File: useRecipients.test.ts    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
describe('broadcast detail > useRecipients', () => {
  afterEach(() => {
    cleanup();
    fetch.resetMocks();
  });

  test('polls for data until the notification is complete', async () => {
    fetch.mockResponses(
      JSON.stringify({
        meta: {
          broadcastStatus: CallStatus.IN_PROGRESS,
        },
        recipients: [
          {
            callSid: '00001',
            to: '+10000001',
            status: CallStatus.IN_PROGRESS,
          },
        ],
        pageCount: 1,
      }),
      JSON.stringify({
        meta: {
          broadcastStatus: CallStatus.COMPLETED,
        },
        recipients: [
          {
            callSid: '00001',
            to: '+10000001',
            status: CallStatus.COMPLETED,
          },
        ],
        pageCount: 1,
      })
    );

    const { waitForNextUpdate, result } = renderHook(() => useRecipients());
    await waitForNextUpdate();

    expect(fetch.mock.calls.length).toBe(2);
    expect(result.current).toMatchInlineSnapshot(`
      Object {
        "error": undefined,
        "loading": false,
        "meta": Object {
          "broadcastStatus": "completed",
        },
        "pageCount": 1,
        "recipients": Array [
          Object {
            "callSid": "00001",
            "status": "completed",
            "to": "+10000001",
          },
        ],
      }
    `);
  });
});
Example #3
Source File: useAlertSetter.test.ts    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
describe('recipients list > useAlertSetter', () => {
  afterEach(() => cleanup());

  test('valid numbers', () => {
    validatedNumbers = {
      [INVALID_NUMBERS]: [],
      [VALID_NUMBERS]: [
        {
          line: 1,
          number: '',
          issue: null,
        },
      ],
    };

    renderHook(() => useAlertSetter(validatedNumbers, setAlert));

    expect(setAlert).toHaveBeenCalledWith({
      message: 'The list of recipients is successfully loaded.',
      type: 'success',
    });
  });

  test('invalid numbers', () => {
    validatedNumbers = {
      [INVALID_NUMBERS]: [
        {
          line: 1,
          number: '',
          issue: null,
        },
      ],
      [VALID_NUMBERS]: [],
    };

    renderHook(() => useAlertSetter(validatedNumbers, setAlert));

    expect(setAlert).toHaveBeenCalledWith({
      message:
        'The list of recipients has invalid numbers. Please review issues and upload again.',
      type: 'error',
    });
  });
});
Example #4
Source File: useNumbersValidator.test.ts    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
describe('recipients list > useNumbersValidator', () => {
  beforeEach(() => jest.resetAllMocks());
  afterEach(() => cleanup());

  test('initializes correctly', () => {
    renderHook(() =>
      useNumbersValidator(parsedNumbers, setAlert, setValidatedNumbers)
    );

    expect(setValidatedNumbers).toHaveBeenCalledWith({
      invalidNumbers: [],
      validNumbers: [],
    });
  });

  test('valid numbers only', () => {
    parsedNumbers = ['+12025555555', '+12025555556'];

    renderHook(() =>
      useNumbersValidator(parsedNumbers, setAlert, setValidatedNumbers)
    );

    expect(setValidatedNumbers).toHaveBeenCalledWith({
      validNumbers: [
        { line: 1, number: '+12025555555', issue: null },
        { line: 2, number: '+12025555556', issue: null },
      ],
      invalidNumbers: [],
    });
  });

  test('valid and invalid numbers', () => {
    parsedNumbers = ['+12025555555', '+12025555555', '+1202555555a'];

    renderHook(() =>
      useNumbersValidator(parsedNumbers, setAlert, setValidatedNumbers)
    );

    expect(setValidatedNumbers).toHaveBeenCalledWith({
      validNumbers: [{ line: 1, number: '+12025555555', issue: null }],
      invalidNumbers: [
        { line: 2, number: '+12025555555', issue: 'Duplicate Number' },
        { line: 3, number: '+1202555555a', issue: 'Invalid Number' },
      ],
    });
  });

  test('invalid numbers only', () => {
    parsedNumbers = ['+1202555555a', '+1202555555b'];

    renderHook(() =>
      useNumbersValidator(parsedNumbers, setAlert, setValidatedNumbers)
    );

    expect(setValidatedNumbers).toHaveBeenCalledWith({
      validNumbers: [],
      invalidNumbers: [
        { line: 1, number: '+1202555555a', issue: 'Invalid Number' },
        { line: 2, number: '+1202555555b', issue: 'Invalid Number' },
      ],
    });
  });
});
Example #5
Source File: usePagination.test.ts    From twilio-voice-notification-app with Apache License 2.0 5 votes vote down vote up 
describe('usePagination', () => {
  beforeEach(() => {
    data = numbers;
  });

  afterEach(() => {
    cleanup();
  });

  test('empty array', () => {
    let { result } = renderHook(() => usePagination(data));
    expect(result).toMatchSnapshot();
  });

  test('handleChangePage', () => {
    let { result } = renderHook(() => usePagination(data));

    act(() => {
      result.current.handleChangePage(null, 2);
    });

    expect(result.current).toMatchSnapshot();
  });

  test('handleChangeRowsPerPage', () => {
    let { result } = renderHook(() => usePagination(data));

    act(() => {
      result.current.handleChangeRowsPerPage({ target: { value: 25 } });
    });

    expect(result.current).toMatchSnapshot();
  });

  test('page goes back to 0 every time data changes', () => {
    let { result, rerender } = renderHook((data) => usePagination(data), {
      initialProps: [...numbers],
    });

    act(() => {
      result.current.handleChangePage(null, 1);
      rerender([]);

      expect(result.current.page).toBe(0);
    });
  });
});
Example #6
Source File: useRecipientsList.test.ts    From twilio-voice-notification-app with Apache License 2.0 4 votes vote down vote up 
describe('recipients list > useRecipientsList', () => {
  beforeEach(() => {
    props = {
      savedNumbers: [],
      savedSelectedFile: null,
    };
  });

  afterEach(() => cleanup());

  test('a file with valid and invalid numbers', async () => {
    props.savedSelectedFile = getNewFileForNumbers([
      '+12025555555',
      '+1234',
      '+12025555555',
    ]);

    let { result, waitForNextUpdate } = renderHook(() =>
      useRecipientsList(props)
    );

    await waitForNextUpdate();

    expect(result.current).toMatchInlineSnapshot(`
      Object {
        "alert": Object {
          "message": "The list of recipients has invalid numbers. Please review issues and upload again.",
          "type": "error",
        },
        "getInputProps": [Function],
        "getRootProps": [Function],
        "invalidNumbers": Array [
          Object {
            "issue": "Invalid Number",
            "line": 2,
            "number": "+1234",
          },
          Object {
            "issue": "Duplicate Number",
            "line": 3,
            "number": "+12025555555",
          },
        ],
        "selectedFile": File {},
        "validNumbers": Array [
          Object {
            "issue": null,
            "line": 1,
            "number": "+12025555555",
          },
        ],
      }
    `);
  });

  test('a file with valid numnbers only', async () => {
    props.savedSelectedFile = getNewFileForNumbers([
      '+12025555555',
      '+12025555556',
    ]);

    let { result, waitForNextUpdate } = renderHook(() =>
      useRecipientsList(props)
    );

    await waitForNextUpdate();

    expect(result.current).toMatchInlineSnapshot(`
      Object {
        "alert": Object {
          "message": "The list of recipients is successfully loaded.",
          "type": "success",
        },
        "getInputProps": [Function],
        "getRootProps": [Function],
        "invalidNumbers": Array [],
        "selectedFile": File {},
        "validNumbers": Array [
          Object {
            "issue": null,
            "line": 1,
            "number": "+12025555555",
          },
          Object {
            "issue": null,
            "line": 2,
            "number": "+12025555556",
          },
        ],
      }
    `);
  });

  test('a file with invalid numbers only', async () => {
    props.savedSelectedFile = getNewFileForNumbers(['+1202555555a', '+123']);

    let { result, waitForNextUpdate } = renderHook(() =>
      useRecipientsList(props)
    );

    await waitForNextUpdate();

    expect(result.current).toMatchInlineSnapshot(`
      Object {
        "alert": Object {
          "message": "The list of recipients has invalid numbers. Please review issues and upload again.",
          "type": "error",
        },
        "getInputProps": [Function],
        "getRootProps": [Function],
        "invalidNumbers": Array [
          Object {
            "issue": "Invalid Number",
            "line": 1,
            "number": "+1202555555a",
          },
          Object {
            "issue": "Invalid Number",
            "line": 2,
            "number": "+123",
          },
        ],
        "selectedFile": File {},
        "validNumbers": Array [],
      }
    `);
  });

  test('a file with more than 4000 recipients', async () => {
    props.savedSelectedFile = getNewFileForNumbers(
      [...Array(4001).keys()].map((i) => `${i}`)
    );

    let { result, waitForNextUpdate } = renderHook(() =>
      useRecipientsList(props)
    );

    await waitForNextUpdate();

    expect(result.current).toMatchInlineSnapshot(`
      Object {
        "alert": Object {
          "message": "File has more than 500 numbers. Please review issues and upload again.",
          "type": "error",
        },
        "getInputProps": [Function],
        "getRootProps": [Function],
        "invalidNumbers": Array [],
        "selectedFile": File {},
        "validNumbers": Array [],
      }
    `);
  });
});