Tests fail when a function is passed as prop

[ingro]

Hello! I'm trying to use this adapter on a project running on the latest preact (v10.0.0-beta.1).

However I've found a big issue when I try to test components which pass functions to their children as props, they yield me this error (I'm using jest as test runner):

ReferenceError: self is not defined

      at oldValue (node_modules/preact/src/diff/props.js:79:9)
      at isSvg (node_modules/preact/src/diff/props.js:16:68)
      at A (node_modules/preact/src/diff/index.js:298:1)
      at ref (node_modules/preact/src/diff/index.js:178:17)
      at x (node_modules/preact/src/diff/children.js:89:22)
      at A (node_modules/preact/src/diff/index.js:285:67)
      at ref (node_modules/preact/src/diff/index.js:178:17)
      at b (node_modules/preact/src/diff/index.js:156:15)
      at x (node_modules/preact/src/diff/children.js:89:22)
      at Object.EMPTY_OBJ [as render] (node_modules/preact/src/render.js:25:3)

This render function yields the error:

export default function Dummy({ name, onChange }) {
    return (
        <div className="foobar">
            <h1>Hello {name}!</h1>
            <select name="field" onSomething={onChange}>
                {options.map(o => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                ))}
            </select>
        </div>
    );
}

while this not:

export default function Dummy({ name, onChange }) {
    return (
        <div className="foobar">
            <h1>Hello {name}!</h1>
            <select name="field">
                {options.map(o => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                ))}
            </select>
        </div>
    );
}

I'm testing this componente like this:

import { h } from 'preact';
import { shallow } from 'enzyme';

import Dummy from './../src/Dummy';

describe('<Dummy />', () => {
    test('First render', () => {
        const tree = shallow(<Dummy name="World" onChange={value => console.log(value)}/>);

        expect(tree.html()).toMatchSnapshot();
    });
})

I've created an example repo to better show off the problem here.

I've tried to track the bug but with no success, the stacktrace does not make much sense to me :/

[robertknight]

Thank-you for the detailed bug report 🙂. The stack trace you posted points to this line. In a browser environment, self refers to window. In Node however, there is no global variable called self.

That code looks a bit odd to me, it apparently relates to preactjs/preact#1590 though.

So in brief, the issue is with the Preact library rather than the Enzyme adapter.

[robertknight]

I filed an issue with the Preact library. For now a workaround is to set the self global variable to point to the window object in your fake DOM environment, eg. with global.self = <window from JSDOM>.

[ingro]

Thanks for the fast reply, wasn't sure if the issue was more related to preact or the adapter. Your workaround seems to work nicely, I'll use it until they fix the bug in preact, keep up the good work!