SLIDE: testing

[flexbox]

• Add a slide to mention https://github.com/callstack/react-native-testing-library
• Add a slide to mention https://github.com/wix/Detox
• installl @callstack/react-native-testing-library on spacecraft
• add a test on utils/hello.test.ts

it("works", () => {
  expect(1).toBe(1);
});

• on package.json

    "test": "jest",
    "test:unit:watch": "jest --watch",

• test with yarn test:unit
• add your first test on src/components/StarshipCard.test.tsx
• Test if title, cost ... are presents
• test with yarn test:unit:watch

import React from "react";

import { render } from "testing-library";
import { StarshipCard } from "~/components/StarshipCard";

const shipFixture = {
...
}

describe("StarshipCard", () => {
  it("renders correctly", () => {
    const { getByText, debug } = render(
      <StarshipCard ship={shipFixture} />
    );
    debug() <----- just to test
    getByText("Star Destroyer");
    getByText("150000000 credits");
  });
});

Updating Jest setup

Testing code using React Navigation takes some setup since we need to mock some native dependencies used in the navigators.

• https://reactnavigation.org/docs/testing/
• Wrap your test component with <NavigationContainer><Card /></NavigationContainer>