Mocking window.Twitch oject in tets

Extensions
1

Hi guys I’ve recently stated to write twitch extensions and I find myself testing with Jest and Enzyme my React components. In my case I just want to test the render method of one of my components, but this one has the window.Twitch.ext on it own constructor.

The code

constructor(props) {
    super(props);
    this.twitch = window.Twitch.ext || null; 
    this.state = { someArray: [] };
    // More code below...
}

The test

    test('render correct props', () =>  {
    let wrapper = shallow(<QuestionPanel/>);
    expect(wrapper).toBeDefined();
    expect(wrapper.state().someArray).toBeDefined();
    expect(wrapper.state().someArray.length).toEqual(0);
    });

The problem
TypeError: Cannot read property ‘ext’ of undefined
this.twitch = window.Twitch.ext || null; --> this has a pointer in the .ext prop

I understand that the window.Twitch object is injected in the context of the components, but I cannot figure out how to mock it in order to pass my tests. Can someone help me?
Thank you in advance.

2

I’ve already gone through this, I set the javascript helper in the global context of the window in my TDD, I took a picture to help you

Captura%20de%20tela%20de%202018-12-16%2022-02-54
Captura%20de%20tela%20de%202018-12-16%2022-02-54705×666 68.1 KB

3

@AlbericoD It would of been more beneficial rather than using an image, you could of copy/pasted the code to the forums using the code blocks that are provided by the forums, or linked to a pastebin/offsite file. An image is not easy to copy/paste from.

4

for me it is more practical to use this forum feature, I hope it is not against the rules.

5

It’s not, it’s feedback. But I can’t copy/paste from an image. Which makes it useless for me to use your code as I have to manually type it out. Also useless if on mobile, as can’t copy/paste, and an image requires more bandwidth to Download.

6

ok, tks

7

First: Thanks @AlberticoD, I will try your solutuion, I find it very accurate. :grinning:
Second: Something to report is when you are writing a post, in the preview, you cannot see the code format right, it shows like raw text. This happended to me because I dindn´t check the final format of the code in the real post and I thought that was a bug, but when I came back I saw that I was ok. So, would be great if we can see it formatted in the preview. But I think that this is for other thread.
Thank you guys! :nerd_face:

8

Format preview works fine for me.

I edited your post and wrapped the code blocks in three ` which put 'em in code blocks

9

I will check it, I´m very sure that I saw it in raw text, if it happens to me again I will report it. :grin:

10

I leave here the config urationthat AlbericoD posted earlier in text format, just in case for another dev need to copy it.

import Enzyme, { shallow, render, mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });


global.toJson   = toJson;
global.shallow  = shallow;
global.render   = render;
global.mount    = mount;

if(typeof windows.Twitch === 'undefined') {
  Object.defineProperty(window, 'Twitch', {
    value: {
      ext: {
        onAuthorized: jest.fn(),
        listen: jest.fn(),
        onContext: jest.fn(),
        bits: {
          getProducts: jest.fn(),
          onTransactionCancelled: jest.fn(),
          onTransactionComplete: jest.fn(),
          setUseLoopback: jest.fn(),
          showBitsBalance: jest.fn(),
          useBits: jest.fn()
        }
      }
    }, 
    writable: true
  })
}
2 Likes