Component methods not found (undefined) in instance()

[denichodev]

Hi, so apparently I can't get the methods of a React component using wrapper.instance().normalizeEvents([mockArray])

This is what my code looks like, I have been looking for answers anywhere but still, no luck.

Calendar.js

class Calendar extends Component { 
 normalizeEvents = data => {
 let events = [];
    data.map(event => {
      events.push({
        id: event.id,
        title: event.title,
        start: event.start,
        end: event.end,
        color: event.category.color,
        textColor: event.category.textColor,
      });
    });
    return events;
 }
 render() {}
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Calendar));

Calendar.test.js

const wrapper = shallow(<Calendar store={mockStore()}/>);
const instance = wrapper.instance();
console.log(wrapper.normalizeEvents(mockArray));

It shows up an error on my jest test, as TypeError: wrapper.normalizeEvents is not a function

Is there something wrong with the code or?

EDIT:
version lists

"enzyme": "^2.9.1",
"react-addons-test-utils": "^15.6.0",
"jest": "^20.0.4"

[ljharb]

Because the instance there is the connected component wrapper which lacks those methods. Try .dive().instance()

[denichodev]

@ljharb Thanks for the quick reply, however I've changed my test file into this code, and it stills give me undefined.

const wrapper = shallow(<Calendar store={mockStore()} />);
const instance = wrapper.dive().instance();
console.log(instance.normalizeEvents);

[ljharb]

@denichodev ah, you're using two HOCs - connect and withRouter. So, you'll need .dive().dive().

[wnadurski]

I have the same problem without a HoC. Prepared minimal reproducible code fragment:

   class TestComponent extends React.Component {
        render() {
            return (<View/>)
        }
    }

    it("has an instance", () => {
        const wrapper = shallow(<TestComponent/>)
        const inst = wrapper.instance();
        expect(inst).toBeTruthy();
    })

This code ends with:

Error: expect(received).toBeTruthy()
Expected value to be truthy, instead received undefined

Edit:
For some reason, the tests have stopped working just recently.

[ljharb]

Your minimal repro case should pass; and your error is from different code. Can you please provide the exact code that's erroring?

[wnadurski]

But it is the exact code that's erroring :P

/* instance.test.js */
import {shallow} from "enzyme"
import * as React from "react"
import {View} from "react-native-mock"

class TestComponent extends React.Component {
    render() {
        return (<View/>)
    }
}

it("is an instance", () => {
    const wrapper = shallow(<TestComponent/>)
    const inst = wrapper.instance();
    expect(inst).toBeTruthy();
})

[Hyster][Lysy] (master) $ jest instance
 FAIL  app\tests\instance.test.js
  ● is an instance

    expect(received).toBeTruthy()
    
    Expected value to be truthy, instead received
      undefined
      
      at Object.<anonymous> (app/tests/instance.test.js:14:14)

[ljharb]

@wnadurski expect(received) can't possibly work in your example then, because there's no variable called received in your example test - it's quite clear that it's not the exact code that's erroring.

[wnadurski]

According to Jest's documentation of the expect (https://facebook.github.io/jest/docs/en/expect.html#expectvalue) it's expected error message when an assertion fails. They gave an example:

test('the best flavor is grapefruit', () => {
  expect(bestLaCroixFlavor()).toBe('grapefruit');
});

which results in error message:

  expect(received).toBe(expected)

    Expected value to be (using ===):
      "banana"
    Received:
      "apple"

But yes, I know it's very strange. It had worked before, and just stopped without a reason :P

[ljharb]

Weird; we use chai with jest, so I've never seen that error.

@wnadurski At any rate, what does wrapper.debug() print out? What version of enzyme are you using? Why are you using import * as React from 'react'; instead of the proper import React from 'react';?

[wnadurski]

@ljharb
1.Output from debug() method is simply: <View />
2. "enzyme": "^2.9.1",
3. That's a good question :P For an unknown reason it's how Intellij resolves imports automatically. I changed the line to proper import React from "react" and still have the same problem :(

[ljharb]

Wait, View - that's react native - are you using a version that works with React 15? Enzyme doesn't support React 16 alphas or betas, so we also don't yet support any react-native version that requires a React higher than 15.

[wnadurski]

Yup, I'm using React 16.0.0-alpha.12 :( Thanks for help

[ljharb]

@denichodev, happy to reopen if #1045 (comment) doesn't solve your issue.