Question with mocking component in jest

[wdfinch]

Hi all. First off thank so for creating this fantastic library. Really appreciate all the works that gone into this project. I had a question about mocking this library in jest. I need to mock the component for tests or I get the following error:

Could not convert the src to a DOM Node

The issue is I'm using this library inside a custom component library I created. I can't figure out how to mock it when it not being used directly in the end project. Here's a sample of my setup.

I have react app A and component library B that is an es module. In react app A I have a component that looks like this:

// Header.tsx

import React from 'react'
import {Icon} from '@my-company/B'

const Header = () => {
  return (
    <Icon src={'test'}/>
  )
}

export default Header 

in package B I export the Icon component like so

// index.ts

export {default as Icon} from './Icon.tsx

// Icon.tsx

import React from 'react'
import SVG from 'react-inlinesvg'

const Icon = ({src}) => {
  return (
    <SVG src={icon} />
  )
}

export default Icon

No matter what I do, I keep getting the error Could not convert the src to a DOM Node. Is there any way I can mock this component when it's being used in another component in a library.

[gilbarbara]

hey @wdfinch
Thanks! :)

Did you try this? #145 (comment)

[wdfinch]

Hey, thanks for the quick reply. I did see that. I couldn't get it to work when the library was being used inside a package rather than the main app. I tried adding the mocks folder and file to my package as all as mocking the Icon.tsx component I import which uses this lib under the hood. No luck. For now I was able to mock the fetch function and then just ignore the error that fires from the library on a test. That at least got the test working.

It could well be an issue with jest or yarn 2 workspaces which I'm using to manage my packages. Just wondering if you had any ideas on how I can handle this.

[gilbarbara]

hey @wdfinch

Your test setup isn't used at all in another library or app that uses your package.
The host needs to mock it or set up the tests to run asynchronously and wait for the request to finish.

[wdfinch]

Ok let me play around with that. Thanks for the help.