Testing with Jest & testing-library GBI with Styled-Components: Cannot read property 'cssRules' of null

[wesleylhandy]

Description

I'm writing tests for a client's Gatsby project. The site is already live, I have been hired to write tests. Within some components, I have been able to successfully test components that use GBI by mocking uuid as proscribed in the documentation. However, within one component, they style GBI with styled-components (again using the method proscribed in documentation), but when I run tests for the component, I get an error Error: Uncaught [TypeError: Cannot read property 'cssRules' of null]

Steps to reproduce

index.js

import React from "react"
import styled, { css } from "styled-components"
import BackgroundImage from "gatsby-background-image"

const StyledBackgroundImage = styled(BackgroundImage)`
  height: 100%;

  ${(props) =>
    props.isExpandable &&
    css`
      background-position: top center;
    `}
`

return <StyledBackgroundImage
              isExpandable={props.blobs.length > 0}
              fluid={props.image.childImageSharp.fluid}
              key={props.blobs.length > 0 ? `expandable` : `notexpandable`}
            />

index.test.js

import * as React from "react"
import { render } from "@testing-library/react"
import Product from "../index"
import uuid from "short-uuid"

beforeEach(() => {
  uuid.generate.mockImplementation(() => `73WakrfVbNJBaAmhQtEeDv`)
})

describe(`Product`, () => {
  const image = {
    childImageSharp: {
      fluid: {
        aspectRatio: 1200,
        src: `test-src`,
        srcSet: `test-src1, test-src2`,
      },
    },
  }
  const blobs = [`TestBlob`]
  it(`renders without error`, () => {
    render(<Product image={image} subtitle={``} blobs={blobs} />)
  })

Expected result

Tests should run without Error

Actual result

TypeError: Cannot read property 'cssRules' of null
          at rulesForCssText (/Users/wehand/private_repo/node_modules/gatsby-background-image/lib/BackgroundUtils.js:38:31)
          at getBackgroundStylesForSingleClass (/Users/wehand/private_repo/node_modules/gatsby-background-image/lib/BackgroundUtils.js:78:25)
          at /Users/wehand/private_repo/node_modules/gatsby-background-image/lib/BackgroundUtils.js:102:34
          at Array.forEach (<anonymous>)
          at getBackgroundStyles (/Users/wehand/private_repo/node_modules/gatsby-background-image/lib/BackgroundUtils.js:101:15)
          at new BackgroundImage (/Users/wehand/private_repo/node_modules/gatsby-background-image/index.js:111:99)

The above error occurred in the <BackgroundImage> component:
          in BackgroundImage (created by Styled(BackgroundImage))
          in Styled(BackgroundImage) (created by Product)

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.7.0 - /usr/local/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.7 - ~/.config/yarn/global/node_modules/.bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 73.0.1
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.18.25 => 2.20.2 
    gatsby-background-image: ^0.9.14 => 0.9.19 
    gatsby-image: ^2.2.39 => 2.3.0 
    gatsby-plugin-eslint: ^2.0.8 => 2.0.8 
    gatsby-plugin-gdpr-cookies: ^1.0.4 => 1.0.6 
    gatsby-plugin-layout: ^1.1.21 => 1.2.0 
    gatsby-plugin-manifest: ^2.2.37 => 2.3.1 
    gatsby-plugin-offline: ^3.0.32 => 3.1.0 
    gatsby-plugin-react-helmet: ^3.1.21 => 3.2.0 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sass: ^2.1.27 => 2.2.0 
    gatsby-plugin-sharp: ^2.3.13 => 2.5.1 
    gatsby-plugin-sitemap: ^2.2.26 => 2.3.0 
    gatsby-plugin-styled-components: ^3.1.17 => 3.2.0 
    gatsby-plugin-stylelint: ^3.2.0 => 3.2.0 
    gatsby-plugin-svgr: ^2.0.2 => 2.0.2 
    gatsby-source-filesystem: ^2.1.46 => 2.2.1 
    gatsby-source-wordpress: ^3.1.58 => 3.2.1 
    gatsby-transformer-remark: ^2.6.53 => 2.7.0 
    gatsby-transformer-sharp: ^2.3.13 => 2.4.1 
  npmGlobalPackages:
    gatsby-cli: 2.8.18

EDIT

I upgraded GBI to ^1.1.1, and get a different error:

Unsupported style property background-position. Did you mean backgroundPosition?
          in div (created by BackgroundImage)
          in BackgroundImage (created by Styled(BackgroundImage))
          in Styled(BackgroundImage) (created by Product)

SECOND EDIT

I reverted back to client's original version and made the following updates, which fixed the errors.

const StyledBackgroundImage = styled(BackgroundImage)`
  background-position: ${(props) => props.isExpandable}
`

<StyledBackgroundImage
  isExpandable={props.blobs.length > 0 ? `top center` : `center`}
/>

However, I noticed the background-position was being overwritten by inline styles that must be defaults coming from the component.

THIRD EDIT

The console warning has returned inexplicably:

Unsupported style property background-position. Did you mean backgroundPosition?
          in div (created by BackgroundImage)
          in BackgroundImage (created by Styled(BackgroundImage))
          in Styled(BackgroundImage) (created by Product)

[timhagn]

Hi @wesleylhandy,

gonna look into it as soon as can, but am quite booked right now : /.

Best,

Tim.

[timhagn]

Hi @wesleylhandy,

it would be much easier (and faster) for me to help you with a minimal reproduction repo (or at least a complete js file + according test file)... The second edit about styled being overwritten I can't really grok, as background-position: 50% 0%; is the same as background-position: top center; oO...

Will happily help should you be able to provide a reproduction case : )!

Best,

Tim.

[timhagn]

Addendum:
Reproduction case doesn't have to be a full repo, a simple replication I can throw in gbitests pages folder would do as well (just like I just did for demonstration purposes in #119 ; ).

Best,

Tim.

[wesleylhandy]

@timhagn Sorry it took me so long to respond. Too many projects at the same time.

I recreated the warning I'm getting, but I'm not able to consistently reproduce the issue that Cannot read property cssRules of null. Though the client when running the tests I wrote for them reported getting that exact error.

I feel stuck!

Here is a repo with code https://github.com/wesleylhandy/gbitest

yarn test:product

[timhagn]

No problem, as I have the same "problem" ; ).

Thanks a lot for the reproduction-repo, gonna try investigating it this weekend - already have a hunch what I have to change to prevent both cases from happening.

Best,

Tim.

[github-actions]

Hi there!
As @timhagn momentarily is the main contributor to this package, this issue
has been automatically marked as stale because it has not had
any recent activity.
It will be closed if no further activity occurs, though we're open to
suggestions on how to get more maintainers!
Thank you for your contributions : )!

[timhagn]

Hi @wesleylhandy,

took way longer until I came around taking a look and fixing this - what it now should be with the just published gbi v1.1.2.
Sadly with gatsby v2.23.5 they introduced a changed scroll behavior, resulting in #125 - seemingly only in Chrome : (.

Alas, hope this fix is still relevant, just wanted to do at least something on the package again % ).

Best,

Tim.

P.S.: Should it solve your issue, feel free to close this one - else I'm gonna do it in a few weeks at the latest : ).

[wesleylhandy]

Thanks @timhagn for coming back to this. It seems the upgrade to 1.1.2 did the trick. Sorry I didn't have the bandwidth to get my hands dirty with the repo and make a PR to fix the issue myself, and help out a little. I'll go ahead and close this issue!

[timhagn]

Hi @wesleylhandy,

no prob, this was a bug & I finally found the time to fix it, so no worries ; ).

Best,

Tim.