Unit Testing

React with Jest and react-testing-library

Agenda

1. Jest

2. AAA

3. Unit testing React

4. Unit testing React by Example using TDD approach

5. Debugging unit tests

Jest

 Typical structures

• describe()
• it() or test()
• beforeEach()
• "expect()" assertions:
  • toEqual()
  • toBe()
  • toHaveBeenCalled()
  • toHaveBeenCalledWith()
• "expect().not" matcher
• jest.fn()
• jest.mock()

Basic example

beforeEach()

• helps keeping your unit tests DRY where it's possible by grouping common arrangements
• works for each it() block which is inside of describe() it is defined in
• each describe() block can have it's own beforeEach()

beforeEach() example

Mocking Modules

• Automatic
• Manual Mock

• Calling jest.mock() with the module factory parameter

• Replacing the mock using mockImplementation() or mockImplementationOnce()

Automatic mock example

AAA

or Arrange, Act, Assert

• put all of your unit test preparation/bootstrap code inside of Arrange section of unit test
• perform action, result of which you want to test inside of Act section of unit test
• check expected result of executed Action inside of Assert section of unit test

AAA example

react-testing-library

• ​rendering components
• finding content inside rendered components
• simulating user events
• almost completely removes necessity of using act()

get vs find vs query

Now a bit of a live coding

Contacts 

oleksandr.hutsulyak@techmagic.co

kami_lviv

Useful Links

• React testing library docs:
  https://testing-library.com/docs/
• Jest documentation:
  https://jestjs.io/docs/getting-started
• Arrange-Act-Assert: A Pattern For Writing Good Tests: https://automationpanda.com/2020/07/07/arrange-act-assert-a-pattern-for-writing-good-tests/

• What if I don't have a time for all of those?
• What to cover in a first place?
• TDD or BDD (before or after?) or both?
• TheOutplay - BDD+TDD based on QA test runs and acceptance criteria
• Storybook as example of Visual component testing