Jest - How to restructure code to make it testable? - unit-testing

Question

I have the following function for which I'd like to add two unit tests, to cover the cases when the selector is or not on the page.
async function getPrice(page, url) {
const priceSelector = '#price';
if (await page.$(priceSelector)) {
return page.$eval(priceSelector, elem => elem.innerText);
}
return null;
}
page is defined in another function:
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
I've tried to mock page so that page.$(priceSelector) returns truthy or falsy but without success. The examples in the doc to mock modules make sense, but as it is, is my code testable? If not, how should it be structured?

Answer 1

There is only one place need to be refactored, you'd better extract the callback function elem => elem.innerText into a new function.
E.g.
index.ts:
export async function getPrice(page, url) {
const priceSelector = '#price';
if (await page.$(priceSelector)) {
return page.$eval(priceSelector, elem => elem.innerText);
}
return null;
}
index.spec.ts:
import { getPrice } from './';
const page = {
$: jest.fn(),
$eval: jest.fn()
};
beforeEach(() => {
jest.resetAllMocks();
});
test('should eval', async () => {
page.$.mockResolvedValueOnce(true);
page.$eval.mockReturnValueOnce('dummy data');
const actualValue = await getPrice(page, 'example.com');
expect(actualValue).toBe('dummy data');
expect(page.$).toBeCalledWith('#price');
expect(page.$eval).toBeCalledWith('#price', expect.any(Function));
});
test('should return null', async () => {
page.$.mockResolvedValueOnce(false);
const actualValue = await getPrice(page, 'example.com');
expect(actualValue).toBeNull();
expect(page.$).toBeCalledWith('#price');
expect(page.$eval).not.toBeCalled();
});
You can test it like this, but the callback function will not be tested and covered.
Unit test result with coverage report:
PASS src/stackoverflow/58651192/index.spec.ts
✓ should eval (6ms)
✓ should return null (2ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 85.71 | 100 | 50 | 100 | |
index.ts | 85.71 | 100 | 50 | 100 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 4.786s, estimated 7s
If we extract the callback function for $eval like this:
export const evalCallback = elem => elem.innerText;
We can test it easily:
test('evalCallback', () => {
const actualValue = evalCallback({ innerText: 'unit test' });
expect(actualValue).toBe('unit test');
});
Unit test result with 100% coverage:
PASS src/stackoverflow/58651192/index.spec.ts (9.066s)
✓ should eval (10ms)
✓ should return null (1ms)
✓ evalCallback (1ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.ts | 100 | 100 | 100 | 100 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 10.804s