reactjs - Testing av Typescript React-komponentkontekst med enzyme
Jeg har en React-komponent i Typescript noe sånt som dette
import * as React from 'react';
import * as PropTypes from 'prop-types';
export class MyComponent extends React.Component<{}, {}> {
context = {
callBack: Function
}
static contextTypes = {
callBack: React.PropTypes.Func
};
render() {
return (
<button onClick={this.callContextCallback}>Call Context</button>
);
}
callContextCallback = () => {
this.context.callBack();
}
}
Og jeg har skrevet testene mine for komponenten
import { mount, shallow } from 'enzyme'
import * as React from "react"
import { MyComponent } from "./MyComponent"
describe(`<MyComponent />`, () => {
let callBackMock = jest.fn()
beforeEach(() => {
wrapper = mount(
<MyComponent />, {
context: {
callBack: callBackMock
}
}
)
})
it(`should call context Callback on clicking button`, () => {
wrapper.find('button').simulate('click')
expect(callBackMock).toHaveBeenCalledTimes(1)
})
})
når jeg kjører testene mine, feiler testen med at function ikke blir kalt.
Jeg prøvde til og med å spøke med å spionere på callContextCalback funksjonen
it(`should call context Callback on clicking button`, () => {
let instance = wrapper.instance()
const spy = jest.spyOn(instance, 'callContextCallback')
instance.forceUpdate();
wrapper.find('button').simulate('click')
expect(spy).toHaveBeenCalledTimes(1)
})
og når jeg kjører testen får jeg denne feilen
Error: Uncaught [TypeError: Cannot read property 'context' of undefined]
TypeError: Cannot read property 'context' of undefined
Hvordan tester jeg konteksten callBack funksjon?
Svar #1
Problemet er løst med hjelp fra enzym-teamet.
Vennligst se på denne Github-issuen for å vite mer om løsningen.