title: Testing in React with preloadedState: redux store gets out of sync when having a manual import of store in a function
body: <p>I'm writing tests for React using react-testing-library and jest and are having some problems figuring out how to set a preloadedState for my redux store, when another file imports the store.</p>
  <p>I Have a function to set up my store like this</p>
  <p><strong>store.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>  export const history = createBrowserHistory()
    export const makeStore = (initalState?: any) =&gt; configureStore({
      reducer: createRootReducer(history),
      preloadedState: initalState
    })
    export const store = makeStore()
  </code></pre>
  <p>and another js file like this</p>
  <p><strong>utils.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>  import store from 'state/store'
    const userIsDefined = () =&gt; {
      const state = store.getState()
      if (state.user === undefined) return false
      ...
      return true
    }
  </code></pre>
  <p>I then have a test that looks something like this:</p>
  <p><strong>utils.test.tsx</strong> (the renderWithProvider is basically a render function that also wraps my component in a Render component, see: <a href="https://redux.js.org/recipes/writing-tests#connected-components" rel="nofollow noreferrer">https://redux.js.org/recipes/writing-tests#connected-components</a>)</p>
  <pre class="lang-js prettyprint-override"><code>  describe(&quot;Test&quot;, () =&gt; {
      it(&quot;Runs the function when user is defined&quot;, async () =&gt; {
        const store = makeStore({ user: { id_token: '1' } })
        const { container } = renderWithProvider(
          &lt;SomeComponent&gt;&lt;/SomeComponent&gt;,
          store
        );
      })
    })
  </code></pre>
  <p>And the &lt;SomeComponent&gt; in turn calls the function in <strong>utils.ts</strong></p>
  <p><strong>SomeComponent.tsx</strong></p>
  <pre class="lang-js prettyprint-override"><code>  const SomeComponent = () =&gt; {
      if (userIsDefined() === false) return (&lt;Forbidden/&gt;)
      ...
    }
  </code></pre>
  <p>Now.. What happens when the test is run seem to be like this.</p>
  <ol>
  <li><strong>utils.ts</strong> is read and reads the line <strong>import store from 'state/store'</strong>, this creates and saves a store variable where the user has not yet been defined.</li>
  <li>the <strong>utils.test.tsx</strong> is called and runs the code that calls <strong>const store = makeStore({ user: { id_token: '1' } })</strong>.</li>
  <li>The <strong>renderWithProvider()</strong> renderes <strong>SomeComponent</strong> which in turn calls the <strong>userIsDefined</strong> function.</li>
  <li>The <strong>if (state.user === undefined)</strong> returns false because <strong>state.user</strong> is still undefined, I think that's because <strong>utils.ts</strong> has imported the store as it were before I called my own <strong>makeStore({ user: { id_token: '1' } })</strong>?</li>
  </ol>
  <hr />
  <p>The answer I want:
  I want to make sure that when call makeStore() again it updates the previously imported version of store that is being used in <strong>utils.ts</strong>. Is there a way to to this without having to use <strong>useSelector()</strong> and pass the user value from the component to my utils function?</p>
  <p>e.g I could do something like this, but I'd rather not since I have a lot more of these files and functions, and rely much on <strong>import store from 'state/store'</strong>:</p>
  <p>SomeComponent.tsx</p>
  <pre class="lang-js prettyprint-override"><code>  const SomeComponent = () =&gt; {
      const user = useSelector((state: IState) =&gt; state.user)
      if (userIsDefined(user) === false) return (&lt;Forbidden/&gt;)
      ...
    }
  </code></pre>
  <p>utils.ts</p>
  <pre class="lang-js prettyprint-override"><code>  //import store from 'state/store'
    const userIsDefined = (user) =&gt; {
      //const state = store.getState()
      if (user === undefined) return false
      ...
      return true
    }
  </code></pre>
  <p>As I said above I'd prefer not to do it this way.</p>
  <hr />
  <p>(btw I can't seem to create a fiddle for this as I don't know how to do that for tests and with this use case)</p>
  <p>Thank you for any help or a push in the right direction.</p>