how to test a function dependent on document global? - unit-testing

Question

I want to start writing unit tests for my code. I thought I'd start with a nice and simple function.
string => string
in action here: http://jsbin.com/yufuzawalo/edit?js,console,output
const animEndString = (type = 'transition') => {
let types =
type === 'transition'
? {
OTransition: 'oTransitionEnd',
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
transition: 'transitionend'
}
: {
OAnimation: 'oAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
MozAnimation: 'animationend',
animation: 'animationend'
}
const elem = document.createElement('div')
return Object.keys(types).reduce(function(prev, trans) {
return undefined !== elem.style[trans] ? types[trans] : prev
}, '')
}
And the test:
describe('example', () => {
it('should return animationend when passed the string animation', () => {
const value = animationEnd('animation')
expect(value).toBe('animationend')
})
it('should return transitionEnd when passed the string animation', () => {
const value = animationEnd('transition')
expect(value).toBe('transitionend')
})
})
output:
example › should return transitionEnd when passed the string animation
expect(received).toBe(expected) // Object.is equality
Expected value to be:
"transitionend"
Received:
The test is failing as an empty string is being returned. I'm presuming that Jest doesn't know what to do with document.createElement('fake')
How would I get around this issue?

Answer 1

Solved...
I've added the following to my setup-jest file
global.document.createElement = jest.fn(() => ({
style: {
transition: 'opacity 300ms ease',
animation: 'test 300ms'
}
}))