Develop Reference

Why does jest-dom give the error "TypeError: expect(...).not.toBeVisible is not a function" when I use it

In relation to a previous question - How can Enzyme check for component visibility? I tried using jest-dom to specifically use their toBeVisible function.
Despite following the documentation I cannot get it to work in my test and get the error
"TypeError: expect(...).not.toBeVisible is not a function"
Fully reproduced in CodeSandbox here
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import MyCheckbox from "./MyCheckbox";
import MyCheckboxesInUse from "./MyCheckboxesInUse";
Enzyme.configure({ adapter: new Adapter() });
test("Check that one checkbox is hidden and the other is visible", () => {
const wrapper = mount(<MyCheckboxesInUse />);
const checkboxes = wrapper.find(MyCheckbox);
expect(checkboxes).toHaveLength(2);
//HOW DO I CHECK THAT ONE IS VISIBLE AND THE OTHER IS NOT ?
expect(checkboxes.get(0)).not.toBeVisible();
expect(checkboxes.get(1)).toBeVisible();
});

I was facing a similar issue. In my case, it was resolved by the following steps:-
Adding the #testing-library/jest-dom package to the devDependencies instead of dependencies in the package.json file.
Next add one of the following:
Adding import '#testing-library/jest-dom'; to the setupTests.js
Or adding in jest configuration (package.json): "setupFilesAfterEnv": [ "#testing-library/jest-dom/extend-expect" ]

The expect().not.toBeVisible method comes from the #testing-library/jest-dom library, since there is no setup or reference to that library the default jest expect is used (thus the function is not found). A quick fix would be to add this import to the top of your test file (assuming you have already imported the library into your project via npm or yarn):
import '#testing-library/jest-dom';
For scalability you may want to add a setupTest.js file (reference here: https://create-react-app.dev/docs/running-tests/)

importing '#testing-library/jest-dom' doesn't help me but
importing #testing-library/jest-dom/extend-expect' help me resolve the error.
import '#testing-library/jest-dom/extend-expect'

How to setup the DfxParser in Angular

I want to use https://github.com/gdsestimating/dxf-parser in my project. When i import in like:
import { DxfParser } from 'dxf-parser';
and than call:
new DxfParser()
i get an error:
TypeError: dxf_parser__WEBPACK_IMPORTED_MODULE_3__ is not a
constructor
What would be the correct way to use the DxfParser in angular? I want to do the same in angular as the jaascript example on projects site:
var parser = new DxfParser();
try {
var dxf = parser.parseSync(fileText);
}catch(err) {
return console.error(err.stack);
}
thanks a lot!

Like the readme of the github states, did you install DxfParser?
npm install dxf-parser
You might also need to install the types for typescript like so:
npm install #types/dxf-parser
Since installing does not seem to be the problem I tried it myself. Doing the import like you did does not work. I looked into the code and it seems that DxfParser is a default export. So if you do:
import DxfParser from "dxf-parser";
It should be working.
More information on exports can be found here

Making PrismJS syntax highliting work in Aurelia

I am trying to add PrismJS as syntax highliter in my Aurelia app (typescript based) and I am half way there as below
1- Install prismjs
yarn add prismjs
2- add css & code part
<template>
<require from="prismjs/themes/prism.css"></require>
<pre><code class="language-sql">${highlightedSQL}</code></pre>
</template>
3- import the prismjs in the component and call highlite.
import "prismjs";
import prismsql from "prismjs/components/prism-sql";
let Prism; // very weird, I have to declare a global variable, other wise it won't work(typescript error)
#inject(HttpClient)
export class Detail {
highlight() {
this.highlightedSQL = Prism.highlight(data.sql, Prism.languages.sql, 'sql');
}
}
and I am getting this error
Unhandled rejection TypeError: Cannot read property 'highlight' of undefined
what could be the right way to make it work?

ill post my comment as an answer just to have the question closed.
instead of import "prismjs"; and let Prism; you should have import Prism from 'prismjs';

Angular CLI How to Globally define a variable [window.myVar]

I'm trying to use a module that depends on another library, whenever i tried to register the library in a component i gives me an error in the console :
Cannot read property 'imports' of undefined
The module name is: quill-image-resize-module
The library is: quill editor.
quill is an html editor.
MyComponent.ts:
import Quill from 'quill';
// add image resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
The error appeared in the console is:
image-resize.min.js:1 Uncaught TypeError: Cannot read property
'imports' of undefined
when i tried to investigate image-resize.min i found this is what causes the error:
var d=window.Quill.imports.parchment
Now i'm using Angular CLI, i found a working solution but the solution is working with webpack.config.js by declaring this in plugins array:
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js'
})
which in turns declare window.Quill Globally.
i'm not sure how to do this in CLI, but i tried to follow some articles by
declaring :
"../node_modules/quill/dist/quill.js"
in angular-cli.json file in the scripts array.
but the error is not gone?

myComp.ts
import * as Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
ngAfterViewInit(){
window['Quill'] = Quill;
window['Quill'].register({'modules/imageResize': ImageResize});
this.quillObj = new Quill(this.textEditorDiv, {
debug: 'error',
modules: {
ImageResize: true,
toolbar: options
},
theme: 'snow'
})};
While angular build ts compiler uses Quill separate instance for register function that causes the issue of undefining so to avoid that use Global singleton Quill obj. (Using Global window object in angular is not good style as per standard)

Can't import TableComponentJS in TypeScript

im working on a project and i have a problem. Im using Angular2, typescript, webpack 2.2 and im trying to use this table component:
pyrite table
The problem starts when i try to import this component in my component. I installed it with npm and thats work. But when i try to import it i use: import * as Table from "pyrite-table";
And then i try to use Table.load but i get an error: index.js:38 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
And that line is this:
export default module.exports = window.pyrite.Table = Table;
So my question is, how can i import this component in my project that is using typescript.

I saw in the project repo's readme the following loc:
import Table from 'pyrite-table';
Have you tried this one? Or:
import { Table } from 'pyrite-table';