CODEWITHSUNDEEP
javascriptunit-testingcanvasjestjshtml2canvas
Frosted Cupcake
Frosted Cupcake

Reputation: 1970

How to test a function which is returned within an object in jest

I want to test my util function which contains options for generating canvas via html2canvas,

const getCanvasOptions = () => {
  const { devicePixelRatio } = window;
  const { scrollHeight, scrollWidth } = document.body;
  const ratio = devicePixelRatio < 2 ? devicePixelRatio : devicePixelRatio / 2;
  const width = scrollWidth * ratio;
  const height = scrollHeight * ratio;
  return {
    allowTaint: true,
    letterRendering: 1,
    foreignObjectRendering: true,
    quality: 1,
    width: width,
    height: height,
    scale: ratio,
    useCORS: true,
    ignoreElements: (node) => {
      return node.nodeName === 'NOSCRIPT';
    }
  };
};

I am testing it by mocking the document and window object, and then strictEqual check of expected and actual returned object. But in my coverage, it shows that the below line is untested,

return node.nodeName === 'NOSCRIPT'

How can I test the above line in jest?

Upvotes: 0

Views: 1521

Answers (1)

Lin Du
Lin Du

Reputation: 102287

You can get the ignoreElements method after invoking getCanvasOptions function in your test case. Then, invoke it and test it as usual.

E.g.

index.ts:

export const getCanvasOptions = () => {
  const { devicePixelRatio } = window;
  const { scrollHeight, scrollWidth } = document.body;
  const ratio = devicePixelRatio < 2 ? devicePixelRatio : devicePixelRatio / 2;
  const width = scrollWidth * ratio;
  const height = scrollHeight * ratio;
  return {
    allowTaint: true,
    letterRendering: 1,
    foreignObjectRendering: true,
    quality: 1,
    width: width,
    height: height,
    scale: ratio,
    useCORS: true,
    ignoreElements: (node) => {
      return node.nodeName === 'NOSCRIPT';
    },
  };
};

index.test.ts:

import { getCanvasOptions } from './';

describe('67778543', () => {
  it('should pass', () => {
    const actual = getCanvasOptions();
    expect(actual).toEqual({
      allowTaint: true,
      letterRendering: 1,
      foreignObjectRendering: true,
      quality: 1,
      width: 0,
      height: 0,
      scale: 1,
      useCORS: true,
      ignoreElements: expect.any(Function),
    });
    // test ignoreElements method
    const rval = actual.ignoreElements({ nodeName: 'NOSCRIPT' });
    expect(rval).toBeTruthy();
  });
});

test result:

 PASS  examples/67778543/index.test.ts (8.274 s)
  67778543
    ✓ should pass (3 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |       50 |     100 |     100 |                   
 index.ts |     100 |       50 |     100 |     100 | 4                 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.31 s, estimated 10 s

Upvotes: 2

Related Questions