{"id":112326,"date":"2021-12-18T15:15:00","date_gmt":"2021-12-18T13:15:00","guid":{"rendered":"https:\/\/www.javacodegeeks.com\/?p=112326"},"modified":"2021-12-09T14:34:58","modified_gmt":"2021-12-09T12:34:58","slug":"parameterized-tests-in-javascript-with-jest","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2021\/12\/parameterized-tests-in-javascript-with-jest.html","title":{"rendered":"Parameterized tests in JavaScript with Jest"},"content":{"rendered":"

Parameterized<\/em> tests are used to test the same code under different conditions. One can set up a test method that retrieves data from a data source. This data source can be a collection of objects, external file or maybe even a database. The general idea is to make it easy to test different conditions with the same test method to avoid duplication and make the code easier to read and maintain.<\/p>\n

Jest<\/code> has a built-in support for tests parameterized with data table that can be provided either by an array of arrays<\/em> or as tagged template literal<\/em>.<\/a><\/p>\n

The code<\/h2>\n

Let\u2019s consider a simple Calculator<\/code> fn that accepts an operator and the numbers array:<\/p>\n

type Operator = '+' | '-' | '*' | '\/';\n\nexport default function calculator(operator: Operator, inputs: number[]) {\n\n    if (inputs.length < 2) {\n        throw new Error(`inputs should have length >= 2`);\n    }\n\n    switch (operator) {\n        case '+':\n            return inputs.reduce((prev, curr) => prev + curr);\n        case '-':\n            return inputs.reduce((prev, curr) => prev - curr);\n        case '*':\n            return inputs.reduce((prev, curr) => prev * curr);\n        case '\/':\n            return inputs.reduce((prev, curr) => prev \/ curr);\n        default:\n            throw new Error(`Unknown operator ${operator}`);\n    }\n}<\/pre>\n
The Calculator<\/code> can be tested using the following scenarios:<\/p>\n
import calculator from '.\/calculator';\n\ndescribe('Calculator', () => {\n    it('throws error when input.length < 2', () => {\n        expect(() => calculator('+', [0])).toThrow('inputs should have length >= 2');\n    });\n\n    it('throws error when unsupported operator was used', () => {\n        \/\/ eslint-disable-next-line @typescript-eslint\/ban-ts-comment\n        \/\/ @ts-ignore\n        expect(() => calculator('&', [0, 0])).toThrow('unknown operator &');\n    });\n\n    it('adds 2 or more numbers incl. `NaN` and `Infinity`', () => {\n        expect(calculator('+', [1, 41])).toEqual(42);\n        expect(calculator('+', [1, 2, 39])).toEqual(42);\n        expect(calculator('+', [1, 2, NaN])).toEqual(NaN);\n        expect(calculator('+', [1, 2, Infinity])).toEqual(Infinity);\n    });\n\n    it('subtracts 2 or more numbers incl. `NaN` and `Infinity`', () => {\n        expect(calculator('-', [43, 1])).toEqual(42);\n        expect(calculator('-', [44, 1, 1])).toEqual(42);\n        expect(calculator('-', [1, 2, NaN])).toEqual(NaN);\n        expect(calculator('-', [1, 2, Infinity])).toEqual(-Infinity);\n    });\n\n    it('multiplies 2 or more numbers incl. `NaN` and `Infinity`', () => {\n        expect(calculator('*', [21, 2])).toEqual(42);\n        expect(calculator('*', [3, 7, 2])).toEqual(42);\n        expect(calculator('*', [42, NaN])).toEqual(NaN);\n        expect(calculator('*', [42, Infinity])).toEqual(Infinity);\n    });\n\n    it('divides 2 or more numbers incl. `NaN` and `Infinity`', () => {\n        expect(calculator('\/', [84, 2])).toEqual(42);\n        expect(calculator('\/', [42, 0])).toEqual(Infinity);\n        expect(calculator('\/', [42, NaN])).toEqual(NaN);\n        expect(calculator('\/', [168, 2, 2])).toEqual(42);\n    });\n});<\/pre>\n
The most important scenarios are focused on the Calculator<\/code> main features (add<\/em>, subtract<\/em>, multiple<\/em> and divide<\/em>) and each of the features is tested with differect set of data values. These tests could be parameterized<\/em> as they are duplicating the same test logic with different data.<\/p>\n
Parameterized (data-driven<\/em>) tests in jest<\/code><\/h2>\n
In Jest<\/code>, paramaterized tests can be created with .each<\/code> that come with the APIs: .each(table)(name, fn)<\/code> and .each`table`(name, fn)<\/code> where the difference is how the test data is provided.<\/p>\n
test.each(table)(name, fn)<\/code><\/h2>\n
In this example, data is provided as an array of arrays<\/em> with the arguments that are injected into the test function for each row. Unique test names are created by positioinally injecting parameters:<\/p>\n
import calculator from '.\/calculator';\n\ndescribe('Calculator', () => {\n    it.each([\n        [[1, 41], 42],\n        [[1, 2, 39], 42],\n        [[1, 2, NaN], NaN],\n        [[1, 2, Infinity], Infinity],\n    ])('adds %p expecting %p', (numbers: number[], result: number) => {\n        expect(calculator('+', numbers)).toEqual(result);\n    });\n\n    it.each([\n        [[43, 1], 42],\n        [[44, 1, 1], 42],\n        [[1, 2, NaN], NaN],\n        [[1, 2, Infinity], -Infinity],\n    ])('subtracts %p expecting %p', (numbers: number[], result: number) => {\n        expect(calculator('-', numbers)).toEqual(result);\n    });\n\n    it.each([\n        [[21, 2], 42],\n        [[3, 7, 2], 42],\n        [[42, NaN], NaN],\n        [[42, Infinity], Infinity],\n    ])('multiplies %p expecting %p', (numbers: number[], result: number) => {\n        expect(calculator('*', numbers)).toEqual(result);\n    });\n\n    it.each([\n        [[84, 2], 42],\n        [[168, 2, 2], 42],\n        [[168, 2, 2], 42],\n        [[42, 0], Infinity],\n        [[42, NaN], NaN],\n    ])('divides %p expecting %p', (numbers: number[], result: number) => {\n        expect(calculator('\/', numbers)).toEqual(result);\n    });\n});<\/pre>\n
Please note that in a parameterized<\/em> test, each data table row creates a new test that has exactly the same lifecylce as the regular test created with the test clousure. For this example, there are 16<\/strong> tests (4<\/strong> tests and each<\/em> with 4<\/strong> sets of data values):
 
<\/div> <\/div><\/p>\n
PASS  src\/parameterized\/calculatorParameterized1.test.ts\n  Calculator\n    \u2713 adds [1, 41] expecting 42 (2 ms)\n    \u2713 adds [1, 2, 39] expecting 42\n    \u2713 adds [1, 2, NaN] expecting NaN\n    \u2713 adds [1, 2, Infinity] expecting Infinity\n    \u2713 subtracts [43, 1] expecting 42\n    \u2713 subtracts [44, 1, 1] expecting 42\n    \u2713 subtracts [1, 2, NaN] expecting NaN\n    \u2713 subtracts [1, 2, Infinity] expecting -Infinity\n    \u2713 multiplies [21, 2] expecting 42 (1 ms)\n    \u2713 multiplies [3, 7, 2] expecting 42 (1 ms)\n    \u2713 multiplies [42, NaN] expecting NaN\n    \u2713 multiplies [42, Infinity] expecting Infinity (1 ms)\n    \u2713 divides [84, 2] expecting 42\n    \u2713 divides [168, 2, 2] expecting 42\n    \u2713 divides [168, 2, 2] expecting 42\n    \u2713 divides [42, 0] expecting Infinity\n    \u2713 divides [42, NaN] expecting NaN (1 ms)\n\nTest Suites: 1 passed, 1 total\nTests:       17 passed, 17 total\nSnapshots:   0 total\nTime:        2.361 s, estimated 3 s\nRan all test suites matching \/src\\\/parameterized\\\/calculatorParameterized1.test.ts\/i.\n\u2728  Done in 3.55s.<\/pre>\n
In case of a failure you may expect only failed tests are reported, like in the example below:<\/p>\n
FAIL  src\/parameterized\/calculatorParameterized1.test.ts\n  Calculator\n    \u2713 adds [1, 41] expecting 42 (1 ms)\n    \u2713 adds [1, 2, 39] expecting 42 (3 ms)\n    \u2715 adds [1, 2, NaN] expecting Infinity (1 ms)\n    \u2713 adds [1, 2, Infinity] expecting Infinity\n    \u2713 subtracts [43, 1] expecting 42 (1 ms)\n    \u2713 subtracts [44, 1, 1] expecting 42\n    \u2713 subtracts [1, 2, NaN] expecting NaN (1 ms)\n    \u2713 subtracts [1, 2, Infinity] expecting -Infinity\n    \u2713 multiplies [21, 2] expecting 42\n    \u2713 multiplies [3, 7, 2] expecting 42\n    \u2713 multiplies [42, NaN] expecting NaN\n    \u2713 multiplies [42, Infinity] expecting Infinity\n    \u2713 divides [84, 2] expecting 42 (1 ms)\n    \u2713 divides [168, 2, 2] expecting 42\n    \u2713 divides [168, 2, 2] expecting 42\n    \u2713 divides [42, 0] expecting Infinity\n    \u2715 divides [42, NaN] expecting Infinity (1 ms)\n\n  \u25cf Calculator \u203a adds [1, 2, NaN] expecting Infinity\n\n    expect(received).toEqual(expected) \/\/ deep equality\n\n    Expected: Infinity\n    Received: NaN\n\n       8 |         [[1, 2, Infinity], Infinity],\n       9 |     ])('adds %p expecting %p', (numbers: number[], result: number) => {\n    > 10 |         expect(calculator('+', numbers)).toEqual(result);\n         |                                          ^\n      11 |     });\n      12 |\n      13 |     it.each([\n\n      at src\/parameterized\/calculatorParameterized1.test.ts:10:42\n\n  \u25cf Calculator \u203a divides [42, NaN] expecting Infinity\n\n    expect(received).toEqual(expected) \/\/ deep equality\n\n    Expected: Infinity\n    Received: NaN\n\n      36 |         [[42, NaN], Infinity],\n      37 |     ])('divides %p expecting %p', (numbers: number[], result: number) => {\n    > 38 |         expect(calculator('\/', numbers)).toEqual(result);\n         |                                          ^\n      39 |     });\n      40 | });\n      41 |\n\n      at src\/parameterized\/calculatorParameterized1.test.ts:38:42\n\nTest Suites: 1 failed, 1 total\nTests:       2 failed, 15 passed, 17 total\nSnapshots:   0 total\nTime:        2.493 s, estimated 3 s<\/pre>\n
test.each`table`(name, fn)<\/code><\/h2>\n
In this example, data is provided with template literal<\/em>, where the first row represents name of variables and the subsequent rows provide test data object injected into the test function for each row. The unique test names are created by injecting parameters by their name.<\/p>\n
import calculator from '.\/calculator';\n\ndescribe('Calculator', () => {\n    it.each`\n    numbers             | result\n    ${[1, 41]}          | ${42} \n    ${[1, 2, 39]}       | ${42} \n    ${[1, 2, NaN]}      | ${NaN} \n    ${[1, 2, Infinity]} | ${Infinity}  \n    `('adds $numbers expecting $result', ({ numbers, result }) => {\n        expect(calculator('+', numbers)).toEqual(result);\n    });\n\n    it.each`\n    numbers             | result\n    ${[43, 1]}          | ${42} \n    ${[44, 1, 1]}       | ${42}\n    ${[1, 2, NaN]}      | ${NaN} \n    ${[1, 2, Infinity]} | ${-Infinity} \n    `('subtracts $numbers expecting $result', ({ numbers, result }) => {\n        expect(calculator('-', numbers)).toEqual(result);\n    });\n\n    it.each`\n    numbers           | result\n    ${[21, 2]}        | ${42} \n    ${[3, 7, 2]}      | ${42} \n    ${[42, NaN]}      | ${NaN}  \n    ${[42, Infinity]} | ${Infinity}  \n    `('multiples $numbers expecting $result', ({ numbers, result }) => {\n        expect(calculator('*', numbers)).toEqual(result);\n    });\n\n    it.each`\n    numbers        | result\n    ${[84, 2]}     | ${42} \n    ${[168, 2, 2]} | ${42} \n    ${[42, 0]}     | ${Infinity}  \n    ${[42, NaN]}   | ${NaN}  \n    `('divides $numbers expecting $result', ({ numbers, result }) => {\n        expect(calculator('\/', numbers)).toEqual(result);\n    });\n});<\/pre>\n
In this example, also 16<\/strong> tests were created:<\/p>\n
PASS  src\/parameterized\/calculatorParameterized2.test.ts\n  Calculator\n    \u2713 adds [1, 41] expecting 42 (1 ms)\n    \u2713 adds [1, 2, 39] expecting 42\n    \u2713 adds [1, 2, NaN] expecting NaN (1 ms)\n    \u2713 adds [1, 2, Infinity] expecting Infinity\n    \u2713 subtracts [43, 1] expecting 42 (1 ms)\n    \u2713 subtracts [44, 1, 1] expecting 42\n    \u2713 subtracts [1, 2, NaN] expecting NaN\n    \u2713 subtracts [1, 2, Infinity] expecting -Infinity\n    \u2713 multiples [21, 2] expecting 42\n    \u2713 multiples [3, 7, 2] expecting 42 (1 ms)\n    \u2713 multiples [42, NaN] expecting NaN (1 ms)\n    \u2713 multiples [42, Infinity] expecting Infinity\n    \u2713 divides [84, 2] expecting 42 (1 ms)\n    \u2713 divides [168, 2, 2] expecting 42\n    \u2713 divides [42, 0] expecting Infinity\n    \u2713 divides [42, NaN] expecting NaN\n\nTest Suites: 1 passed, 1 total\nTests:       16 passed, 16 total\nSnapshots:   0 total\nTime:        2.432 s, estimated 3 s\nRan all test suites matching \/src\\\/parameterized\\\/calculatorParameterized2.test.ts\/i.\n\u2728  Done in 3.36s.<\/pre>\n
Ultimate parameterized test for the Calculator<\/code><\/h2>\n
The previous example could be further improved by adding an additional test param: operator<\/code> which in the end reduces the code repeatition:<\/p>\n
import calculator from '.\/calculator';\n\ndescribe('Calculator', () => {\n    it.each`\n    numbers             | operator | result\n    ${[1, 41]}          | ${\"+\"}   | ${42} \n    ${[1, 2, 39]}       | ${\"+\"}   | ${42} \n    ${[1, 2, NaN]}      | ${\"+\"}   | ${NaN} \n    ${[1, 2, Infinity]} | ${\"+\"}   | ${Infinity}  \n    ${[43, 1]}          | ${\"-\"}   | ${42} \n    ${[44, 1, 1]}       | ${\"-\"}   | ${42}\n    ${[1, 2, NaN]}      | ${\"-\"}   | ${NaN} \n    ${[1, 2, Infinity]} | ${\"-\"}   | ${-Infinity} \n    ${[21, 2]}          | ${\"*\"}   | ${42} \n    ${[3, 7, 2]}        | ${\"*\"}   | ${42} \n    ${[42, NaN]}        | ${\"*\"}   | ${NaN}  \n    ${[42, Infinity]}   | ${\"*\"}   | ${Infinity}\n    ${[84, 2]}          | ${\"\/\"}   | ${42} \n    ${[168, 2, 2]}      | ${\"\/\"}   | ${42} \n    ${[42, 0]}          | ${\"\/\"}   | ${Infinity}  \n    ${[42, NaN]}        | ${\"\/\"}   | ${NaN}    \n    `('verifies \"$operator\" on $numbers expecting $result', ({ numbers, operator, result }) => {\n        expect(calculator(operator, numbers)).toEqual(result);\n    });\n});<\/pre>\n
And the test run:<\/p>\n
PASS  src\/parameterized\/calculatorParameterized3.test.ts\n  Calculator\n    \u2713 verifies \"+\" on [1, 41] expecting 42\n    \u2713 verifies \"+\" on [1, 2, 39] expecting 42\n    \u2713 verifies \"+\" on [1, 2, NaN] expecting NaN\n    \u2713 verifies \"+\" on [1, 2, Infinity] expecting Infinity\n    \u2713 verifies \"-\" on [43, 1] expecting 42\n    \u2713 verifies \"-\" on [44, 1, 1] expecting 42\n    \u2713 verifies \"-\" on [1, 2, NaN] expecting NaN\n    \u2713 verifies \"-\" on [1, 2, Infinity] expecting -Infinity\n    \u2713 verifies \"*\" on [21, 2] expecting 42\n    \u2713 verifies \"*\" on [3, 7, 2] expecting 42\n    \u2713 verifies \"*\" on [42, NaN] expecting NaN\n    \u2713 verifies \"*\" on [42, Infinity] expecting Infinity\n    \u2713 verifies \"\/\" on [84, 2] expecting 42\n    \u2713 verifies \"\/\" on [168, 2, 2] expecting 42\n    \u2713 verifies \"\/\" on [42, 0] expecting Infinity\n    \u2713 verifies \"\/\" on [42, NaN] expecting NaN\n\nTest Suites: 1 passed, 1 total\nTests:       16 passed, 16 total\nSnapshots:   0 total\nTime:        2.463 s, estimated 3 s\n\u2728  Done in 3.66s.<\/pre>\n
In review<\/h2>\n