Posts

Showing posts with the label enzyme

Enzyme - Mock non-instance variables

Image
Clash Royale CLAN TAG #URR8PPP Enzyme - Mock non-instance variables I have the following React Component: const titleText = translate('header.about'); const About = ({onClose}) => ( <div> <ModalHeader title={titleText} onClose={onClose} /> <Content /> </div> ); I also have a test file that checks the onClose functionality, which works fine: onClose const spy = sinon.spy(); const wrapper = shallow(<About onClose={spy} />); // I also tried "mount()" ... assert.equal(spy.callCount, 1, 'onClose was called exactly once'); However, I get the following warning in the terminal when running the test: Warning: Failed prop type: The prop `title` is marked as required in `ModalHeader`, but its value is `undefined` I don't get the warning in the browser, only when running the test. While it's only a warning, I'd rather fix this if possible. Any way to give a mock value to title ? I am only interested in possible so...

Mock imports to test function logic

Image
Clash Royale CLAN TAG #URR8PPP Mock imports to test function logic Lets say I have the following file. This file imports promiseFunction from a library and I'd like to test the doSomething() function. promiseFunction doSomething() In particular, assert the states when the promise resolves or fails // file: MyComponent.js import promiseFunction from 'somewhere'; class MyClass extends Component { doSomething = () => { promiseFunction() .then((data) => { this.setState({...this.state, name: data.name}); }.catch(() => { this.setState({...this.state, error: 'error'}); }); } } How do I mock the promiseFunction thats being imported. Or really just any function that's being imported. promiseFunction // file: MyClass.spec.js it('sets error in state when doSomething() is rejected', () => { const wrapper = shallow(<MyClass />); // How do I mock promiseFunction here? wrapper.instance().doSomething()...

Jest + Enzyme + React Native: How to test content of tag?

Image
Clash Royale CLAN TAG #URR8PPP Jest + Enzyme + React Native: How to test content of <Text /> tag? I want to unit test with Jest and Enzyme if my <Text /> tag correctly receives props.header as text. <Text /> props.header Usually I was able to test the content of the <Text /> tag like this: <Text /> it("should render a label", () => { expect(wrapper.find(Text).contains("submit")).toBe(true); }); But as soon as I pass an object this is no longer possible. Let me show you: const createTestProps = props => ({ header: SOME_CONSTANT, ...props }); ... let wrapper; let props; beforeEach(() => { props = createTestProps(); wrapper = shallow(<MyList {...props} loaded={false} />); }); it("should render a header", () => { expect(wrapper.find(Text).contains(props.header)).toBe(true); }); This fails with the following error message: ● MyList › rendering › still loading › should render a head...