React-redux-firebase: feat(example): mocking firebase within test for react container

Created on 22 Apr 2017 · 13Comments · Source: prescottprue/react-redux-firebase

Hi, I was wondering is there any quick snippet or link that would show how to mock firebase while testing containers and components?

examples help wanted question

Source

psych0der

Most helpful comment

I was really struggling to find a neat way to do this. The best thing I found was to export the component without withFirebase(...) so you can mock the firebase object.

For example, to check a sign up form calls firebase.createUser():

SignUpForm.js:

export const SignUpForm = ({ firebase, onSuccess }) => (
    // ...
);

export default withFirebase(SignUpForm);

SignUpForm.test.js:

// import form without withFirebase()
import { SignUpForm } from "./SignUpForm";

test("SignUpForm", done => {
    const mockFirebase = {
      createUser: jest.fn(() => Promise.resolve({ email: "[email protected]" }))
    };
    const component = mount(
      <SignUpForm
        firebase={mockFirebase}
        onSuccess={user => {
          // ... ensure mock was called as expected
          done();
        }}
      />
    );

    // ... trigger form submission
})

bfirsh on 26 May 2018

👍3

All 13 comments

@psych0der There isn't currently a clean snippet, but will look into writing something.

Not sure if it will be helpful, but you will most likely want to mock reactReduxFirebase as is done in the tests.

prescottprue on 24 Apr 2017

any news on that?

pzmudzinski on 14 Sep 2017

👍1

Have yet to write a full example, but the key behind it is making sure that your component has store within the context that points to a redux store that includes reactReduxFirebase in its creation.

Something like this should work out (based on tests for react-redux-firebase):

import React, { createClass, Children, Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import { createStore, compose, combineReducers } from 'redux'
import {
  reactReduxFirebase,
  firebaseStateReducer,
  firebaseConnect
} from 'react-redux-firebase'

const PassThrough = (props) => <div>{JSON.stringify(this.props)}</div>
const Container = (props) => <Passthrough {...this.props} />

const enhance = compose(
  firebaseConnect()
  connect()
)(Container)

const createStoreWithMiddleware = compose(
  reactReduxFirebase(fbConfig, { userProfile: 'users' })
)(createStore)

describe('some tests of connected firebase components', () => {

  it('should have props.firebase', () => {
    const store = createStoreWithMiddleware(
      combineReducers({ firebase: firebaseStateReducer })
    )

    const tree = TestUtils.renderIntoDocument(
      <ProviderMock store={store}>
        <Container pass="through" />
      </ProviderMock>
    )

    const container = TestUtils.findRenderedComponentWithType(tree, Container)

    expect(container.props.firebase).to.exist
    // Call your other interactions with Firebase and test them
  })
})

Feel free to reach out over gitter if this does not get you going the right direction.

prescottprue on 24 Oct 2017

I was really struggling to find a neat way to do this. The best thing I found was to export the component without withFirebase(...) so you can mock the firebase object.

For example, to check a sign up form calls firebase.createUser():

SignUpForm.js:

export const SignUpForm = ({ firebase, onSuccess }) => (
    // ...
);

export default withFirebase(SignUpForm);

SignUpForm.test.js:

// import form without withFirebase()
import { SignUpForm } from "./SignUpForm";

test("SignUpForm", done => {
    const mockFirebase = {
      createUser: jest.fn(() => Promise.resolve({ email: "[email protected]" }))
    };
    const component = mount(
      <SignUpForm
        firebase={mockFirebase}
        onSuccess={user => {
          // ... ensure mock was called as expected
          done();
        }}
      />
    );

    // ... trigger form submission
})

bfirsh on 26 May 2018

👍3

@bfirsh Totally agree, this is similar to how I have mocked in the past. It would be good to make an example from this that we add to the docs for those interested in patterns for testing.

prescottprue on 28 May 2018

👍1

@prescottprue @bfirsh any way to do something like the above using the new hook format e.g. useFirestoreConnect?

dsgriffin on 4 Nov 2019

@dsgriffin I don't think there are any good examples floating around yet - would you mind opening a new issue so we can track adding some to either the tests or the docs or both?

prescottprue on 4 Nov 2019

@prescottprue any update on testing patterns with the useFirestoreConnect hook? Was this issue opened?

markoelez on 27 Feb 2020

@markoelez I made a new issue for tracking that - thanks for reaching out

prescottprue on 3 Mar 2020

I ended up mocking the module by doing:

//__mocks__/react-redux-firebase/index.js
import React from 'react'
const reactReduxFirebase = jest.requireActual('react-redux-firebase')

module.exports = {
  ...reactReduxFirebase,
  withFirebase: Component => {
    const firebase = {
      // modify as you need
      remoteConfig: () => ({ fetchAndActivate: jest.fn() })
    }

    return props => <Component {...props} firebase={firebase} />
  }
}

Not sure if it's the best approach.