Insufficient Documentation: Testing - Building a new store for each test.

[charlestbell]

What docs page needs to be fixed?

I'd like to request an addition to the docs.
Here on this page: https://redux.js.org/usage/writing-tests#connected-components
The writer gives a very simple example of testing redux. What they don't discuss, is how set up your redux state for each test.

Example:
I have 2 tests, one where the state is set up one way, another where needs to be set up differently. In the example given, this isn't possible, the state persists between tests, giving inconsistent tests results.

There are a few options out there, like redux-mock-store, which builds a completely new store for each test, but I don't see any mention of it officially. Or any replacement for that matter.

It seems like an oversight that an official method for providing a way to clean or redefine the redux store between each test is not provided.

Could someone please add that to the docs?

Thanks!

[markerikson]

The short answer is that there's two ways to initialize state on a per-test basis:

• Passing in preloadedState when the store is created
• Dispatching additional actions after the store is created

But yeah, this section could be expanded.

[charlestbell]

Thank you for the response!

The 'preloadedState' you mentioned sounds awesome. However, that sounds like it would require building a new store per test, which again, I'm not sure how I'm supposed to be doing.

I do hope it gets expanded on in the docs. It's an extremely hard thing to find information and examples on.

[markerikson]

Creating a new store per test is what you should be doing :)

FWIW I'm looking at https://redux.js.org/usage/writing-tests#components and it does seem to show what you are asking for:

// test-utils.jsx
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import userReducer from '../userSlice'

function render(
  ui,
  {
    preloadedState,
    store = configureStore({ reducer: { user: userReducer }, preloadedState }),
    ...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 }

[timdorr]

Yeah, I'm not sure what we need to do here. The thing being asked for is already there. Just provide those params to the render method that's suggested and you've got per-test state preloaded however you need it to be.

[charlestbell]

@timdorr Thank you for your response

The example given is in the test-utils.js file. Which is global, meaning it would be the same on all tests.
Quote from the docs: " And our test can use our exported render function to test the criteria of our integration test:"

The example given uses a variable called preloadedState, what is that? How do I use it? Where is it defined? How is it structured? If it is defined in test-utils.js, can it be overridden per test also? How?

Can you show me how I "Just provide those params to the render method" as you say? There are no examples at all.

[charlestbell]

Also, just to make sure, I read the RTL and Jest docs about the render function, and nowhere does it show passing params to the redux store through the render function

[markerikson]

Yeah, agreed that we could use another example or two here. FWIW the function signature should give an indication of how this is supposed to work:

import { render } from './test-utils';

test('Renders a Redux-connected component', () => {
  const preloadedState = {counter: {value: 42}};
  // Pass the preloaded state for _this one specific test_ as a field in the options object
  const { findByText } = render(<Counter />, {preloadedState});

  expect(findByText('42')).toBeInTheDocument();
})

I think we could add three examples:

• The one above where we pass in preloadedState
• A second where we create a store first, dispatch a couple actions to get to the desired state, and pass the store in to render()
• Also, we should update the render function to return store as part of the output, like {...rtlRender(), store}, so that it can be destructured and accessed

Might even be worth rearranging the page to move the "Connected Components" section first, since we say up top that that's how we want people to do things, and add some couple sub-headers for "Setting Up a Render Function", "Writing the Test", and "Preparing Store State".

[charlestbell]

@markerikson Thank you sir! That gives me a place to start.

Also, I love your 3 example ideas. Those would be life savers!

[charlestbell]

@markerikson That worked! You're a godsend.

[markerikson]

Updated the testing docs in #4378 to cover these questions.