This content originally appeared on DEV Community and was authored by Akinn Rosa
When using BroadcastChannel with React in your application, you probably will face with this issue if try to run some tests with React Testing Library and Jest:
ReferenceError: BroadcastChannel is not defined
51 |
52 | useEffect(() => {
> 53 | authChannel = new BroadcastChannel('auth')
| ^
To resolve this, I tried to mock BroadcastChannel creating a broadcast.ts file inside __mocks__ folder with this content:
jest.mock('BroadcastChannel')
Now, you probably will face with this issue:
Cannot find module 'BroadcastChannel' from 'src/__mocks__/broadcast.ts'
Require stack:
src/__mocks__/broadcast.ts
> 1 | jest.mock('BroadcastChannel')
| ^
2 |
Jest can't find BroadcastChannel because is not a module, then, it is necessary install BroadcastChannel module (this helps your tests and help old browsers support).
yarn add broadcast-channel
Then, import BoradcastChannel where you are using (just add import, your code should be the same).
import { BroadcastChannel } from 'broadcast-channel'
In the last step, you need to change you mock file that you created at start to mock broadcast-channel module:
jest.mock('broadcast-channel')
That's It! ?
Now your tests should pass and you can work with jest using BroadcastChannel perfectly.
This content originally appeared on DEV Community and was authored by Akinn Rosa
Akinn Rosa | Sciencx (2021-06-14T14:49:12+00:00) How to solve ‘BroadcastChannel is not defined’. Retrieved from https://www.scien.cx/2021/06/14/how-to-solve-broadcastchannel-is-not-defined/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.