1

I'm trying to test a function which interacts with the Headers class. Not sure if my test technically falls into a category of a unit-test but that should not be relevant.

When I run the test, I see the infamous error:

ReferenceError: Headers is not defined

I'm sure it's because the test is executed in a non-browser environment.

My question is: how do I execute the test in a browser environment, because I don't want to mock the Headers class at all?

$ yarn test                                                                         
yarn run v1.12.3                                                                    
$ jest                                                                              
 FAIL  __tests__/request-init-spec.ts                                     
  requestInit                                                               
    × should work (9ms)                                                             

  ● requestInit › should work                                               

    ReferenceError: Headers is not defined                                          

      13 | describe(requestInit.name, () => {                               
      14 |   it('should work', () => {                                              
    > 15 |     const headers = new Headers();                                       
         |                     ^                                                    
      16 |     headers.append('H1', 'V1');                                          
      17 |                                                                          
      18 |     const requestInit: RequestInit = {                                   

      at Object.it (__tests__/request-init-spec.ts:15:21)                 

Test Suites: 1 failed, 1 total                                                      
Tests:       1 failed, 1 total                                                      
Snapshots:   0 total                                                                
Time:        4.574s                                                                 
Ran all test suites.                                                                
error Command failed with exit code 1.                                              
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Lin Du
  • 88,126
  • 95
  • 281
  • 483
Igor Soloydenko
  • 11,067
  • 11
  • 47
  • 90
  • What's wrong with mocking the class? – Etheryte Jul 22 '19 at 21:28
  • @Nit I want my code to execute against the actual class. Mocking it defeats the purpose of my test. – Igor Soloydenko Jul 22 '19 at 21:38
  • 2
    In that case it's simply a question of choosing an implementation. [`node-fetch`](https://www.npmjs.com/package/node-fetch#class-headers) has one that should suffice. – Etheryte Jul 22 '19 at 21:45
  • @Nit that might work actually. But the question is still open — I'd like to execute some _other_ test in browser in future I'm sure. – Igor Soloydenko Jul 22 '19 at 22:00
  • 2
    In that case you'll probably want to use a different testing framework, for example both Mocha and Jasmine support running tests both in Node and in the browser. For Jest, there's [`jest-lite`](https://github.com/kvendrik/jest-lite), but that's third-party. As seen in [this thread](https://github.com/facebook/jest/issues/139), the Jest team isn't (or wasn't) interested in adding browser testing support. – Etheryte Jul 22 '19 at 23:21
  • 1
    @Nit I'm totally fine with `jest-lite` ...as soon as I find a way to get it running. :D I did notice Jest team still hasn't released the in-browser execution support. – Igor Soloydenko Jul 22 '19 at 23:40

1 Answers1

0

I fixed by changing environment from node to jsdom.

Other fix is

const fetch = require('node-fetch');
global.fetch = fetch
global.Headers = fetch.Headers;

another solution is presented here 'ReferenceError: Headers is not defined' when using Headers in a server side rendered react project

tldr

const fetch = require("node-fetch");

var myHeaders = new fetch.Headers();

if you need more context, read this github issue with 300 comments and potential solutions

https://github.com/jestjs/jest/issues/2549

Daniel
  • 7,684
  • 7
  • 52
  • 76