preactjs/enzyme-adapter-preact-pure

`enzyme-adapter-preact-pure` is not working with TypeScript

triallax opened this issue · 8 comments

triallax commented

It seems the types declared in types/enzyme/index.d.ts are conflicting with the one from @types/enzyme. I get 12 errors stating that @types/enzyme has no exported member 'member'.

Proposed solution: use @types/enzyme instead.
Edit: I was wrong about the cause of the errors.

robertknight commented

The files in types/enzyme/index.d.ts are not shipped as part of the enzyme-adapter-preact-pure package (see contents), they are only used during development. Can you provide more details about your setup and the error that you are seeing?

mhmdanas commented

You're right. I was wrong about the cause of the errors. However, I'm still getting those errors.

I'm using the latest version of all dependencies.

When I run tsc --noEmit, I get the following errors:

node_modules/enzyme-adapter-preact-pure/build/src/Adapter.d.ts:1:10 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'AdapterOptions'.

1 import { AdapterOptions, ElementType, EnzymeAdapter, JSXElement, RSTNode } from 'enzyme';
           ~~~~~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/Adapter.d.ts:1:26 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'ElementType'.

1 import { AdapterOptions, ElementType, EnzymeAdapter, JSXElement, RSTNode } from 'enzyme';
                           ~~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/Adapter.d.ts:1:54 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'JSXElement'.

1 import { AdapterOptions, ElementType, EnzymeAdapter, JSXElement, RSTNode } from 'enzyme';
                                                       ~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/Adapter.d.ts:1:66 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'RSTNode'.

1 import { AdapterOptions, ElementType, EnzymeAdapter, JSXElement, RSTNode } from 'enzyme';
                                                                   ~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/MountRenderer.d.ts:1:10 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'MountRenderer'.

1 import { MountRenderer as AbstractMountRenderer, RSTNode } from 'enzyme';
           ~~~~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/MountRenderer.d.ts:1:50 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'RSTNode'.

1 import { MountRenderer as AbstractMountRenderer, RSTNode } from 'enzyme';
                                                   ~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/ShallowRenderer.d.ts:1:10 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'ShallowRenderer'.

1 import { ShallowRenderer as AbstractShallowRenderer, RSTNode, ShallowRenderOptions } from 'enzyme';
           ~~~~~~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/ShallowRenderer.d.ts:1:54 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'RSTNode'.

1 import { ShallowRenderer as AbstractShallowRenderer, RSTNode, ShallowRenderOptions } from 'enzyme';
                                                       ~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/ShallowRenderer.d.ts:1:63 - error TS2724: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'ShallowRenderOptions'. Did you mean 'ShallowRendererProps'?

1 import { ShallowRenderer as AbstractShallowRenderer, RSTNode, ShallowRenderOptions } from 'enzyme';
                                                                ~~~~~~~~~~~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/StringRenderer.d.ts:1:10 - error TS2724: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'Renderer'. Did you mean 'render'?

1 import { Renderer, JSXElement, RSTNode } from 'enzyme';
           ~~~~~~~~

  node_modules/@types/enzyme/index.d.ts:725:17
    725 export function render<P, S>(node: ReactElement<P>, options?: any): Cheerio;
                        ~~~~~~
    'render' is declared here.

node_modules/enzyme-adapter-preact-pure/build/src/StringRenderer.d.ts:1:20 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'JSXElement'.

1 import { Renderer, JSXElement, RSTNode } from 'enzyme';
                     ~~~~~~~~~~

node_modules/enzyme-adapter-preact-pure/build/src/StringRenderer.d.ts:1:32 - error TS2305: Module '"../../../../../../../../Users/mhmdanas/Desktop/(project)/node_modules/@types/enzyme"' has no exported member 'RSTNode'.

1 import { Renderer, JSXElement, RSTNode } from 'enzyme';
                                 ~~~~~~~


Found 12 errors.
cubbie commented

I'm getting all the same errors. Still unable to figure out a fix.

ljharb commented

I believe you’d need to install the enzyme types locally, as will all typescript consumers of this adapter.

mhmdanas commented

I do have the latest version of @types/enzyme installed locally.

  • 😕1
robertknight commented

Taking another look at this, the original issue report was sort-of right. Although the files from types/enzyme in the source tree are not included in the build, they are referenced by the .d.ts files that are generated alongside the .js files in the package: https://unpkg.com/browse/enzyme-adapter-preact-pure@2.1.0/build/src/StringRenderer.d.ts

These .d.ts files are not part of the public interface of the adapter really, so I think we could just stop generating them and instead create a minimal index.d.ts file for the adapter.

As readers may have guessed, even though the adapter itself is written in TypeScript, all of the large projects actively consuming it have been written in JavaScript, so consuming the package from the context of a project written in TS isn't being regularly tested as far as I know.

  • 👍4
robertknight commented

There is work ongoing to address this in #83 #84.

I'm not an expert on current best practices for creating and publishing type definitions for modules, so input from experienced TS users is welcome.

  • 👍1
robertknight commented

The latest release (v2.2.0) integrates with the @types/enzyme package and ships some extensions to the types for the "preact" package. Please see the release notes for more information.

In particular, please note that you will need to add the following to one of the .ts or .d.ts files in your project to make sure that the TypeScript compiler sees the extensions to the "preact" and "enzyme" package types:

/// <reference types="enzyme-adapter-preact-pure" />

There is an example project which you can use as a reference.

I'm going to close this issue now but please feel free to comment if you encounter any difficulties.

  • 👍4