aweary / enzyme-adapter-preact

enzyme-adapter-preact

Enzyme adapter for Preact

Installation and usage

Install adapter with npm install enzyme-adapter-preact --save-dev or yarn add enzyme-adapter-preact --dev. Use it like this in ES6 projects:

import Enzyme from 'enzyme';
import { Adapter } from 'enzyme-adapter-preact';

Enzyme.configure({ adapter: new Adapter() });

or like this in CommonJS projects:

const Enzyme = require('enzyme');
const { Adapter } = require('enzyme-adapter-preact');

Enzyme.configure({ adapter: new Adapter() });

enzyme-adapter-preact's Issues

Cannot access class methods from `instance()`

I've been enjoying the adapter, but running into an issue when trying to test class methods on my components.

I have the following:
const enzymeWrapper = mount(<App {...props} />); expect(enzymeWrapper.instance().myMethod()).toBe("123");

But I get enzymeWrapper.instance(...).myMethod is not a function. Inspecting the output from enzymeWrapper.instance() I can see that my instance variables are available, but class methods are not.

ReferenceError: TestUtils is not defined

ReferenceError: TestUtils is not defined

import { h, render, Component } from "preact";
import Input from "../components/input"; // It is a input component
import { mount } from "enzyme";
let value;
const input = mount(<Input changeCallback={val => value = val}/>);
input.simulate('change');

I get the above error TestUtils is not defined. I'm facing below issues,

1. when i look in the preactEnzymeAdapter.js, there is no TestUtils. How to work with this library.
2. when i try to run input.setProps() method, I get this error
   TypeError: instance.setChildProps is not a function

.html() not working

Thanks for a great module!

I can't get it working with my connected component (preact-redux).

const wrapper = mount(<ErrorDialog store={store} />);
console.log(wrapper.html());

    TypeError: Cannot read property 'replace' of undefined

      26 |     const wrapper = mount(<ErrorDialog store={store} />);
      27 |
    > 28 |     console.log(wrapper.html());
         |                         ^
      29 |     console.log(wrapper.find('ErrorDialogComponent').length);
      30 |     // expect(wrapper.find(ErrorDialogComponent).prop('title')).should.equal(title);
      31 |   });

      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:824:56)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1534:25)
      at ReactWrapper.html (node_modules/enzyme/build/ReactWrapper.js:820:21)
      at Object.<anonymous> (src/containers/error-dialog/index.test.js:28:25)

It seems to be nodeToHostNode which returns bad data to Enzyme.

I'd be happy to do a PR, but I have no clue where the real issue lies. May it be that preact doesn't provide a reference to the DOM element from the component instance?

Looks like the published version doesn't contain the latest code

Invariant Violation: ReactShallowRenderer render(): Invalid component element.

I've got everything setup according to your docs however whenever I attempt to shallow render a very simple class based component I get the following error:

Invariant Violation: ReactShallowRenderer render(): Invalid component element.

For clarity I'm using:

"typescript": "2.8.3"
"preact": "8.2.9"
"mocha": "^5.1.1"
"enzyme": "^3.3.0"
"enzyme-adapter-preact": "^0.2.0"

I've put together a repo illustrating this here:
https://github.com/jhdevuk/typescript-preact-enyme

@awinogradov @sanpoChew @aweary

Thanks

Source of inspiration?

I'm wondering if some of the internals here could be implemented based on mzgoddard/preact-render-spy?

Misspelled word 'adapter'

In several places word 'adapAter' is misspelled.
That makes it difficult for someone to find this package.

• Repo name should be changed to preact-enzyme-adapter.
• In index.js class name should be changed to PreactEnzymeAdapter.
• In package.json package description should be changed to A Preact adapter for the Enzyme testing utility.

Status of adapter

Since enzyme v3 has officially launched I was wondering if this project is still in development since it would be very useful
Are there any docs for what is expected of enzyme adapters?

functional components props.children is undefined

It seems like functional components do not receive the children property as expected.

class ClassbasedCom {
    render(props) {
        return '<div>{props.children}</div>;
    }
}

const FunctionalCom = (props) => {
    return '<div>{props.children}</div>;
}

const wrapper1 = shallow(<ClassbasedCom foo><span>a</span></ClassbasedCom>);
wrapper1.children().length // 1
const wrapper2 = shallow(<FunctionalCom foo><span>a</span></FunctionalCom>);
wrapper2.children() // undefined

Current state of this library

Hey,

What is the current state of this adapter? I couldn't find any other adapter implementation for preact 😞

Will this be maintained and published on npm?

Thank you!

react-test-renderer/shallow is checking for isReactComponent on prototype to determine whether a Component is a class

My tests have been failing when a component is written as a class and this seems to be why, I've fixed it here: https://github.com/sanpoChew/preact-enzyme-adapter/commit/49280495c213a01f47ed9459187903155fbdc890

This feels like a dirty way to do it though, so I didn't want to open this as a pull request

name of package?

It seems like this should be named enzyme-adapter-preact, for consistency with the existing adapters.

TypeError: Cannot read property 'hasOwnProperty' of undefined

I am getting a TypeError: Cannot read property 'hasOwnProperty' of undefined
at

import { Adapter } from "enzyme-adapter-preact"

node_modules/enzyme-adapter-preact/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:276:27 at Object.<anonymous> (node_modules/enzyme-adapter-preact/node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:943:5) at Object.<anonymous> (node_modules/enzyme-adapter-preact/node_modules/react-test-renderer/shallow.js:6:20) at Object.<anonymous> (node_modules/enzyme-adapter-preact/lib/PreactAdapter.js:20:16) at Object.<anonymous> (node_modules/enzyme-adapter-preact/lib/index.js:7:22)

Export ES6-compatible build code

I can see that current code is mixing CommonJS and ES6 modules: https://github.com/aweary/enzyme-adapter-preact/blob/master/src/PreactAdapter.js

it also contains module.exports which always adds lots of pain when you try to integrate module like enzyme-adapter-preact into ES6-code project (or even TS). Usually it's considered a good practice to have named exports. Also it's worth it to have ES6 code in npm package + "module" property in package.json. I could've added it to package.json but I'm a bit afraid that I will break some plans on the package.

@aweary @awinogradov 🆙