A react native testing library test for the UI

[jg210]

https://callstack.github.io/react-native-testing-library/docs/api

[github-actions]

Lines	Statements	Branches	Functions
	88.09% (37/42)	100% (6/6)	87.5% (14/16)

[jg210]

jest test passes locally, but not on CI:

● Authorities › renders

    Unable to find an element with testID: fingerprint

    <Text>
      loading...
    </Text>

      75 |     localAuthorities: LocalAuthority[]
      76 | ) {
    > 77 |     await waitFor(() => {
         |                  ^
      78 |         expect(screen.getByTestId("fingerprint")).toHaveTextContent(fingerprint.slice(0, 8));
      79 |     });
      80 |     const authoritiesList = screen.getByTestId("authoritiesList");

      at src/__tests__/Authorities.test.tsx:77:18
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12
      at apply (src/__tests__/Authorities.test.tsx:88:2)
      at apply (src/__tests__/Authorities.test.tsx:73:31)
      at Object.assertUICorrect (src/__tests__/Authorities.test.tsx:110:39)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
      at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)

[jg210]

Now, jest times out instead:

 FAIL src/__tests__/Authorities.test.tsx (7.107 s)
  ● Authorities › renders

    thrown: "Exceeded timeout of 5000 ms for a test.
    Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

      94 |     afterAll(() => server.close());
      95 |
    > 96 |     it("renders", async () => {
         |     ^
      97 |
      98 |         // To test drag to refresh works, return different data for first and second requests.
      99 |         const localAuthorities1 = localAuthorities.slice(0, 1);

      at it (src/__tests__/Authorities.test.tsx:96:5)
      at Object.describe (src/__tests__/Authorities.test.tsx:90:1)

[jg210]

 FAIL src/__tests__/Authorities.test.tsx (17.056 s)
  ● Authorities › renders

    thrown: "Exceeded timeout of 15000 ms for a test.
    Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

      94 |     afterAll(() => server.close());
      95 |
    > 96 |     it("renders", async () => {
         |     ^
      97 |
      98 |         // To test drag to refresh works, return different data for first and second requests.
      99 |         const localAuthorities1 = localAuthorities.slice(0, 1);

      at it (src/__tests__/Authorities.test.tsx:96:5)
      at Object.describe (src/__tests__/Authorities.test.tsx:90:1)

[jg210]

Tests were failing since mock didn't allow for variation in the number of renders before changing from old to new data. Now it only changes the data after the assertions for the first data have passed.