https://github.com/pham-andrew/rtl-mocks-bug-minimal-reproducible-example

React Testing Library Mocks Bug Minimal Reproducible Example
https://github.com/pham-andrew/rtl-mocks-bug-minimal-reproducible-example

bug reacttestinglibrary

Last synced: 5 days ago
JSON representation

React Testing Library Mocks Bug Minimal Reproducible Example

• Host: GitHub
• URL: https://github.com/pham-andrew/rtl-mocks-bug-minimal-reproducible-example
• Owner: pham-andrew
• Created: 2022-04-27T16:55:40.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-28T08:06:53.000Z (almost 3 years ago)
• Last Synced: 2023-03-02T14:08:49.935Z (almost 2 years ago)
• Topics: bug, reacttestinglibrary
• Language: TypeScript
• Homepage:
• Size: 654 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Testing Library Mocks Bug Demonstration

## Instructions

This repo demonstrates a bug found in React Testing Library where an incorrect mock may cause a passing test to mark as failing. This bug can be seen by pulling the "master" branch and running "npm run test".

## File of Interest

There are 3 files in src, a testing file (Bug.test.tsx) and two component files (Page1.tsx and Page2.tsx). Both component files require a mock to be tested as they fetch and use a response via useEffect upon rendering.

## Bug Description

There are 2 tests. The first test has incorrect mocks, it requires an array but receives an object. If the first test is run solo, it will error. The second test is correct and passes if run solo, it requires a string and receives a string.

When we run the test suite containing both tests we get the following result:

```

√ given incorrect mock (76 ms)

× given correct mock, passes solo (19 ms)

```

This is the opposite of what we expect, since the first test has incorrect mocks and errors its own, it should not pass with another test in the suite. The second test that passes on its own should not be marked as failing when it comes after a failing test.

## Solution

This is an issue with testing library react version 11.2.7. Updating "@testing-library/react" fixes the issue (we updated to 13.1.1). Updating "@testing-library/react" requires "react" and "react-dom" to be updated as well (we updated to 18.1.0). In this repo, replacing package.json with the contents of package.updated.json, deleting package-lock.json and node_modeules, then "npm install", fixes the issue.