Unit Testing

When creating or updating a component, it is expected that you add or update the relevant unit test(s) for the component. Jest and React Testing Library are the main libraries that are used for testing components in toynet-react. More information about these libraries can be found at the repsective links.

Below is a brief guide on how to do unit testing:

1. Test user behavior when testing a component. This means that you do not need to test the inner state of a component. For example, in a counter component, you would want to test clicking the button, and then expect that the correct value is displayed. This is in contrast to testing the internal state of the component. (See below example).

2. If the component renders data from an API make sure to mock out the API return call and ensure that the date gets rendered. Checkout mocking modules in Jest's documentation to see how to do this.

// common/components/Counter.tsx
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <div>{`Count: ${counter}`}</div>
      <button
        data-testid='counter-btn-inc'
        onClick={() => setCount(prev => prev + 1)}>
        Increment
      </button>
    </div>
  )
}

// common/components/__tests__/Counter.test.tsx
describe('The counter component', () => {
  it('should render the count', () => {
    const { getByText, getByTestId } = render(<Counter />);
    const incBtn = getByTestId('counter-btn-inc');
    expect(/count: 0/i).toBeInTheDocument();
    fireEvent.click(incBtn);
    expect(/count: 1/i).toBeInTheDocument();
  })
})2. 

Folder and File Structure

|-- toynet-react/
  |-- src/
    |-- Login/
      |-- Login.tsx
      |-- Button.tsx
      |-- __tests__/
        |-- Login.test.tsx
        |-- Button.test.tsx
    |-- utils/
      |-- usePrevious.ts
      |-- __tests__/
        |-- usePrevious.test.ts

Unit tests should live close the files that they are testing in a __tests__ subdirectory.

Writing a Unit Test

A unit test file must follow the filename patter of {filename}.test.(ts|tsx) and be in a __tests__ subdirectory that lives right next to the component that you are testing.

When writing a unit test it should include a top level describe block that describes the component being tested. Within that block, there should be one or more it blocks that describe the behavior being tested for that component.

Component.test.tsx

describe('the component being tested', () => {
  it('should have some behavior', () => {
    // ...
  });
});

How to Run the Unit Tests

The unit test can be run by running the command npm run test. This will run all the tests that have not been ran and bring up an interactive console that can be used to run only failed tests, run all of the tests, or filter test files and names to run a specific test or test suite. To get to this, after running npm run test press the w key.

Troubleshooting

It keeps saying that my snapshots are failing.

If it says that there are snapshots that are failing, you can press the i key to interactively update snapshots and then u to update the snapshot. If you know that you are updating the DOM layout of a component you can run npm run test -- -u to update all snapshots.