lundi 1 avril 2019

React testing toHaveStyleRule property not found in style rules

I am trying to test that ThemeProvider is providing theme to my component. It is properly providing default & custom theme to the base class and passing tests, but when I test for the condition class it does not find any of the styles. This is even while passing through the class directly. This is my first venture into Styled-Components and testing as a whole.

I have tested using the optional { css } import from styled-components, tried passing the class directly, and removing the default class entirely. I also tried setting a default style directly in the styled-component. The toBeTruthy() does pass, so it's at least seeing it with the class I would think?

// This is being called globally

export const mountWithTheme = (Component, customTheme) => {
  const theme = customTheme || defaultTheme
  return mount(<ThemeProvider theme={theme}>{Component}</ThemeProvider>)
}


import React from 'react';
import { shallow, mount } from 'enzyme';
import { MemoryRouter, Route, Link } from 'react-router-dom';
import { css } from 'styled-components';
import 'jest-styled-components';

import HeaderLinkA from './HeaderLinkA.jsx';

describe('HeaderLinkA', () => {
    it('renders color /w prop', () => {
        const wrapper = mount(
            <MemoryRouter initialEntries={['/about']} >
                <Route component={props => <HeaderLinkA {...props} name='about' test='about' theme= /> } path='/about' /> 
            </MemoryRouter>
        )
        expect(wrapper.find('Link')).toHaveStyleRule('color', 'white');
        expect(wrapper.find('Link')).toHaveStyleRule('color', 'white', {
            modifier: `:hover`,
        });
    });

    it('is themed with default styles, when theme is missing', () => {
        const wrapper = global.StyledComponents.mountWithTheme(
            <MemoryRouter initialEntries={['/about']} >
                <React.Fragment>      
                    <HeaderLinkA name='about' testclass='section-link-active' />,
                </React.Fragment>
            </MemoryRouter>
        )
        expect(wrapper.find('Link')).toHaveStyleRule('color', '#FFF')
        expect(wrapper.find('Link')).toHaveStyleRule('color', '#FFF', {
            modifier: `:hover`
        });
        expect(wrapper.find('Link.section-link-active')).toBeTruthy();
        expect(wrapper.find('Link')).toHaveStyleRule('border-bottom', '1px solid #95d5d2');
    });
});

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const StyledHeaderLink = styled(Link)`
    text-decoration: none;
    color: ${ props => props.theme.primarycolor };
    padding-bottom: 2px;
    overflow-x: hidden;
    position: relative;
    display: inline-flex;

    &:active,
    &:hover {
        color: ${ props => props.theme.primarycolor };
    }

    &.section-link {
        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            background: ${ props => props.theme.secondarycolor };
            width: 100%;
            transform: translate3d(-110%, 0, 0);
            -webkit-transform: translate3d(-110%, 0, 0);
            transition: transform .3s ease-in-out;
            -webkit-transition: transform .3s ease-in-out;
        }

        &:hover:after {
            transform: translate3d(0%, 0, 0);
            -webkit-transform: translate3d(0%, 0, 0);
        }
    }

    &.section-link-active {
        border-bottom: 1px solid ${ props => props.theme.secondarycolor || '#95d5d2' };
    }

`;

const HeaderLinkA = ( props ) => {
    const page = props.name.toLowerCase();
    return (
        <StyledHeaderLink {...props } to={`/${ page }`}
            className={props.testclass || window.location.pathname === `/${ page }` ? // refactor this to be controlled by HeaderO and pass down the prop.
            'section-link-active'
            : 'section-link'} >
        {props.name}
        </StyledHeaderLink>
    )
}

export default HeaderLinkA;

All of the tests pass up until the final one which I'm stuck on.

"Property 'border-bottom' is not found in style rules"

Expected: "border-bottom: 1px solid #95d5d2" Received: "border-bottom: undefined"

Aucun commentaire:

Enregistrer un commentaire