What does this part of the Redux document mean?

Question

I'm using the Redux-tool kit to set it up. We are now using @testing-library/react to set up testing-related settings. I got a question while looking at the official document.

// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// Import your own reducer
import reducer from '../reducer'

function render(
  ui,
  {
    initialState,
    store = createStore(reducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

What function does this part have in the code part above?

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

score 0 · Accepted Answer · answered Feb 21 '21 at 15:26

I don't know this library, but export * from '@testing-library/react' just means that anything you can import from @testing-library/react, you can now import directly from this file, test-utils.js.

I guess that they found it convenient to have a way to access just the react testing modules in one place, with the render method overwritten with their own custom version defined above.

score 0 · Answer 2 · answered Feb 21 '21 at 23:13

They are basically creating their own aliased copy of the React Testing Library package where everything is the same except for the render function. This setup is explained in more detail in the testing library docs section Setup: Custom Render.

The custom render function takes the same arguments as the original render function from @testing-library/react so that they can be used interchangeably (though it adds support for extra properties initialState and store in the options object). Internally, the custom render function calls on the library's render function, which they import with an aliased name rtlRender, but it sets a default property for the wrapper option so that components will be rendered inside of a redux Provider component.

Now to the confusing exports. export * from '@testing-library/react' takes all of the exports from the testing library and re-exports them. export { render } overrides the previously exported render function with the custom one, so it needs to come after the export *.

As for why they would create the function in one place and then export it later rather than just doing export function, I think that's just a matter of code style preference. This seems to work fine, as far as I can tell:

import { render as rtlRender } from "@testing-library/react";

// re-export everything
export * from "@testing-library/react";
// override render method
export function render(somethingCustom, ui, { ...renderOptions } = {}) {
  return rtlRender(ui, { ...renderOptions });
}

What does this part of the Redux document mean?

2 Answers2