translate is not a function Admin-On-Rest test

Question

I am trying to test empty username text field on my login page based on admin-on-rest Login page.

https://github.com/marmelab/admin-on-rest/blob/master/src/mui/auth/Login.js

My testcase is like this.

import Login, { renderTextField } from '../../../modules/core/Login';
import {propTypes, reduxForm, Field, reducer as formReducer} from 'redux-form';
import redux, { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'

describe ('<Login/>', () => {
  let container
  let submitting 
  let onSave 
  let store
  let tn

  beforeEach(()=>{
    submitting = false
    //tn= sinon.spy()
    onSave = Promise.resolve()
  })

  it("shows help text when first name is set to blank", () => {
    store = createStore(combineReducers({ form: formReducer }))
    tn = (label) => label;
    const props = {
        onSave,
        submitting: false,
        theme: customTheme,
        translate: tn, 
        store
    }
    container = mount(
      <Provider store={store}>
        <Login {...props}/>
      </Provider>
    )
        const input = container.find('TextField').first()
        input.simulate('blur')
        console.log(input.debug())
        expect(input.props.errorText).to.equal('Required')
    })

})

I get an error in the redux form validate function.

TypeError: translate is not a function
at validate (C:/src/modules/core/Login.js:165:25)

ie this line on the link in above code

errors.username = translate('aor.validation.required');

How can I test this?

Answer 1

You have to include the TranslationProvider too

import { TranslationProvider } from 'admin-on-rest';
/* ... */

it("shows help text when first name is set to blank", () => {
    store = createStore(combineReducers({ form: formReducer }))
    const props = {
        onSave,
        submitting: false,
        theme: customTheme,
        store
    }
    container = mount(
      <Provider store={store}>
          <TranslationProvider locale="en">
              <Login {...props}/>
          </TranslationProvider>
      </Provider>
    )
    const input = container.find('TextField').first()
    input.simulate('blur')
    console.log(input.debug())
    expect(input.props.errorText).to.equal('Required')
})