Jest снимок не распространяется на компонент - PullRequest
1 голос
/ 06 марта 2020

Я использую CRA и встроенную библиотеку Jest Unit Test. Я написал несколько простых модульных тестов со снимком, и когда тест был пройден, моего покрытия не было.

Текущий результат: при запуске npm test -тест пройден, при запуске npm run test-coverage - создать папку покрытия с html, но только компонент React не покрывает

Ожидаемый результат: показать покрытие при запуске npm run test-coverage для компонента React с моментальным снимком

пакета. json

  "scripts": {
        "test": "react-scripts test --env=jsdom",
        "test-coverage": "set CI=true && react-scripts test --coverage --watchAll",
    },
  "jest": {
        "collectCoverageFrom": [
            "src/lib/**/*.{js,jsx}",
            "!**/node_modules/**",
            "!**/coverage/**"
        ],
        "coverageReporters": [
            "text",
            "html"
        ],
        "coverageThreshold": {
            "global": {
                "branches": 80,
                "functions": 80,
                "lines": 80,
                "statements": 80
            }
        }
    }

Кнопка. js

export const Button = ({
    style,
    onClick,
    disabled = false,
    children,
    showSpinner = false,
    className
}) => {
    return (
        <div
            style={style}
            className={cn('button', className)}
            onClick={onClick}
            disabled={disabled}
        >
            {children}
            {showSpinner && (
                <Spinner className='button--spinner' animation='border' />
            )}
        </div>
    );
};

export default withButton(Button);

Butto.test. js

import React from 'react';
import renderer from 'react-test-renderer';
import { Button } from './Button';
import Icon from '../../Icon';


describe('<Button/> ', () => {
    const jsxElement = (
        <>
            <h1>Hello, world!</h1>Icon <Icon name='doctor' />
        </>
    );

    ['string children', <Icon name='doctor' />, jsxElement].forEach(
        children => {
            it('should render children when it was passed', () => {
                const button = renderer.create(<Button>{children}</Button>).toJSON();

                expect(button).toMatchSnapshot();
            });
        }
    );

    it('should render spinner when showSpinner is true', () => {
        const button = renderer.create(<Button showSpinner={true} />).toJSON();

        expect(button).toMatchSnapshot();
    });

    it('should not render spinner by default', () => {
        const button = renderer.create(<Button />).toJSON();

        expect(button).toMatchSnapshot();
    });
});

enter image description here

На основании официального до c. он должен работать https://jestjs.io/docs/en/snapshot-testing#does -код-код-покрытие-работа-со-снимком-тестирование

Когда я запускаю тест покрытия отдельно по шаблону в терминале, я вижу, что компонент покрыт enter image description here

...