I have a simple Context Provider that I want to export as a npm package.
I have created an index.tsx file that will be accessible when importing this npm package from another project;
I am importing the Context Provider to this index.tsx, then exporting it.
When I try and run a test with the ContextProvider imported from index.tsx, the imported object is undefined (even though I can navigate to it in VS Code). However, when I import it directly from the source, it works fine. I will need to have it working from the index.tsx file in order to access it through the npm package.
Can anyone explain to me what I’m missing here?
src/index.tsx
import ErrorHandler from './contexts/ErrorHandlerContextProvider'
export { ErrorHandler }
// export { default as ErrorHandler } from './contexts/ErrorHandlerContextProvider' //<-- no luck
src/index.test.tsx
// import ErrorHandler from './contexts/ErrorHandlerContextProvider' // <-- this import works
import { ErrorHandler } from '.'
describe('ErrorHandlerContextProvider', () => {
it('is truthy', () => {
expect(ErrorHandler.ErrorHandlerContextProvider).toBeTruthy()
})
})
src/contexts/ErrorHandlerContextProvider.tsx
import React, { createContext, FC, useContext } from 'react'
import PropTypes from 'prop-types'
type errorHandlerContextType = {
handleError: (error: Error, info: string) => Promise<void>
}
const ErrorHandlerContext = createContext<errorHandlerContextType | null>(null)
const useErrorHandlerContextProvider = () => {
return useContext(ErrorHandlerContext)
}
const ErrorHandlerContextProvider: FC = ({ children }) => {
const handleError = (error: Error, info: string): Promise<void> => {
console.log('error', error)
console.log('info', info)
return Promise.reject(error)
}
return (
<ErrorHandlerContext.Provider value={{ handleError }}>
{children}
</ErrorHandlerContext.Provider>
)
}
ErrorHandlerContextProvider.propTypes = {
children: PropTypes.node.isRequired
}
export default { ErrorHandlerContextProvider, useErrorHandlerContextProvider }
npm run test
FAIL src/index.test.tsx
● ErrorHandlerContextProvider › is truthy
TypeError: Cannot read property 'ErrorHandlerContextProvider' of undefined
4 | describe('ErrorHandlerContextProvider', () => {
5 | it('is truthy', () => {
> 6 | expect(ErrorHandler.ErrorHandlerContextProvider).toBeTruthy()
| ^
7 | })
8 | })
9 |
at Object.<anonymous> (src/index.test.tsx:6:25)