When writing Jest test cases, throws error

[manjunathangv]

Please see the code below

import React from 'react';
import JupyterViewer from "react-jupyter-notebook";

export default function Ipynb({file_content}) {
    return (
        <div className="jupternotebook" style={{position:'relative', left: '-15px'}}>
            <JupyterViewer rawIpynb={JSON.parse(file_content)}/>
        </div>
    );
};

It works fine with in the UI. it renders as expected.

But When I try to implement test case using jest.

It throws below error. could you please help me if you know.

Thanks.

[Joeyonng]

Hi @manjunathangv,

Sorry, I never used Jest before, so I am not sure what the problem is just based on the output. Just based on the output, it looks like a problem with a built-in function defineProperty instead of Jest or react-jupyter-notebook. I am happy to help if you can provide more information.

Thanks,

[manjunathangv]

@Joeyonng

Thanks for your response.

When importing react-jupyter-notebook getting below error.

I also tried installing types - npm i --save-dev @types/react-jupyter-notebook

Could not find a declaration file for module 'react-jupyter-notebook'. 'c:/React APP/f1modelcatalogui/node_modules/react-jupyter-notebook/dist/JupyterViewer.js' implicitly has an 'any' type. Try npm i --save-dev @types/react-jupyter-notebook if it exists or add a new declaration (.d.ts) file containing declare module 'react-jupyter-notebook';ts(7016).

Any help is appreciated.

Thanks in advance.

[Joeyonng]

It seems that this error is because this package lacks support for Typescript. I wrote the package in Javascript and it seems that Typescript requires that the package it imports must have a type, which this package doesn't have. I also didn't create @types/ package for this package, so installing @types/react-jupyter-notebook won't work.

You can see this Stack Overflow answer to add react-jupyter-notebook.d.ts, but I am not sure where to put this file and what content should be put in the file.

Sorry about that, but I guess this is all I can help you because I don't use Typescript. I will try to add Typescript support for this package if I have time :)

[mojjy]

Hi, I experienced the same issue, we basically need to tell jest to transform certain packages, transform: { 'node_modules/(?:(@babel/runtime|react-syntax-highlighter)/.*)': 'ts-jest', '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css' }, 'transformIgnorePatterns': [ 'node_modules/(?!(@babel/runtime|katex|react-syntax-highlighter)/.*)', ] (jest.config.ts) then it works

[mojjy]

to solve the typescript issue, create a file called, index.d.ts, and add the following

declare module 'react-jupyter-notebook' {
import {FC} from 'react';

const JupyterViewer : FC<{rawIpynb: any}>

export default JupyterViewer }