Docs: alt import/export pattern

[alexkrolick]

What:

Why:

How:

Checklist:

• Documentation
• Tests
• Ready to be merged
  
• Added myself to contributors table
  

fixes #169

[yashhy]

Hmm...was trying something like below and then saw ur PR.

import { render as reactTestingRender } from 'react-testing-library';
import TestWrapper from './TestWrapper';
import React from 'react';

const render = (node, ...options) => {
  return reactTestingRender(
    <TestWrapper>{node}</TestWrapper>,
    ...options
  )
};

export * from 'react-testing-library';
export { render };

But still it throws the error,

TypeError: Cannot set property render of [object Object] which has only a getter

@alexkrolick did i miss something?

[kentcdodds]

I wonder if it has to do with Babel configuration...

[kentcdodds]

Let's go with that! Would you like to make a pull request to add a note about that?

[christian314159]

Getting the same TypeError, what in the Babel setting is causing this? Going with calling it renderWithTheme for now to work around the issue for now though.

[kentcdodds]

I think if folks use Babel 7 they should be good with what we have documented already. Maybe we should add a note about that instead...

[szokrika]

Does anyone else experienced this error message again?
Running latest Babel deps, I see the same error...

[MatanBobi]

@szokrika Can you please share a repro so we'll be able to help?

[szokrika]

@MatanBobi thanks for your help! Let me know if you need the babel/jest config as well

import thunk from 'redux-thunk'
import PropTypes from 'prop-types'
import { Provider } from 'react-redux'
import { applyMiddleware, combineReducers, createStore } from 'redux'
import compose from 'app/utils/compose'
import reducers from 'app/reducers/index'
import { userEvent } from '@testing-library/user-event'
import { render as rtlRender } from '@testing-library/react'
import { DisclaimerProvider } from '@customPackage/react-component-library'

function createMockStore(initialState = {}) {
  const rootReducer = combineReducers(reducers)
  const middlewares = thunk
  const create = compose(applyMiddleware(middlewares))(createStore)
  return create(rootReducer, initialState)
}

function customRender(
  ui,
  { initialState, store = createMockStore(initialState), ...options } = {}
) {
  function Wrapper({ children }) {
    return (
      <Provider store={store}>
        <DisclaimerProvider>{children}</DisclaimerProvider>
      </Provider>
    )
  }
  Wrapper.propTypes = {
    children: PropTypes.node
  }

  return rtlRender(ui, { wrapper: Wrapper, ...options })
}

export * from '@testing-library/react'

export { customRender as render, userEvent }

    TypeError: Cannot read properties of undefined (reading 'replace')

      34 |
    > 35 |   return rtlRender(ui, { wrapper: Wrapper, ...options })
         |                   ^
      36 | }
      37 | // re-export everything
      38 | export * from '@testing-library/react'

[MatanBobi]

@szokrika Unfortunately, that's not enough. If you can please open a new issue with a shareable reproduction (either codesandbox or github repo) it will help us investigate and help :)

[szokrika]

@MatanBobi
Nevermind, I was able to work around the issue, by refactoring/fixing some of my components. Thanks for your help!