javascript - 如何 Jest 获取代码的未覆盖部分

Question

我写了一个简单的 reducer :

const simpleCounterReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT_COUNT':
            return state + 1;
        case 'DECREMENT_COUNT':
            return state - 1;
        default:
            return state;
    }
};

export default simpleCounterReducer;

然后进行一些简单的测试来涵盖所有可能的选项。

import simpleCounterReducer from '../src/reducers/simple-counter.js';

describe('counter works and', () => {
    test('can handle increments', () => {
        expect(
            simpleCounterReducer(0, {
                type: 'INCREMENT_COUNT'
            })
        ).toBe(1);
    });

    test('can handle decrements', () => {
        expect(
            simpleCounterReducer(1, {
                type: 'DECREMENT_COUNT'
            })
        ).toBe(0);
    });

    test('can handle invalid actions', () => {
        expect(
            simpleCounterReducer(4, {
                type: 'SOME_RANDOM_ACTION'
            })
        ).toBe(4);
    });
});

然后我运行了这个命令: npx jest --colors --coverage
但即使我已经涵盖了代码的所有部分，我还是得到了一条未覆盖的线。是开 Jest 有问题还是我错过了什么。有没有办法 Jest 找出未被覆盖的代码部分。

Image for jest test coverage output

Answer 1

如果您想查看未涵盖的行，您可以在浏览器中打开生成的报告。

默认情况下，报告在这里 ./coverage/lcov-report/index.html .

但是您还会在控制台中看到未覆盖行的行号(不是未覆盖的行数，而是行号，在您的情况下，它是第一行)。

如果需要，还可以对覆盖范围进行一些配置:https://jestjs.io/docs/en/configuration#collectcoverage-boolean

旁注，它在幕后使用 Istanbul 尔:https://github.com/gotwarlost/istanbul