使用 preloadedState 在 React 中进行测试：在函数中手动导入存储时，redux 存储会不同步

Question

我正在使用react-testing-library和jest为React编写测试，并且在弄清楚当另一个文件导入存储时如何为我的redux存储设置preloadedState时遇到一些问题。

我有一个功能可以像这样设置我的商店

商店.ts

  export const history = createBrowserHistory()
  export const makeStore = (initalState?: any) => configureStore({
    reducer: createRootReducer(history),
    preloadedState: initalState
  })
  export const store = makeStore()

和另一个像这样的js文件

实用程序.ts

  import store from 'state/store'
  const userIsDefined = () => {
    const state = store.getState()
    if (state.user === undefined) return false
    ...
    return true
  }

然后我有一个看起来像这样的测试：

utils.test.tsx（ renderWithProvider 基本上是一个渲染函数，它也将我的组件包装在渲染组件中，请参阅： https: //redux.js.org/recipes/writing-tests#connected-components）

  describe("Test", () => {
    it("Runs the function when user is defined", async () => {
      const store = makeStore({ user: { id_token: '1' } })
      const { container } = renderWithProvider(
        <SomeComponent></SomeComponent>,
        store
      );
    })
  })

而 <SomeComponent> 又会调用utils.ts中的函数

一些组件.tsx

  const SomeComponent = () => {
    if (userIsDefined() === false) return (<Forbidden/>)
    ...
  }

现在..运行测试时发生的情况似乎是这样的。

1. utils.ts被读取并读取行import store from 'state/store'，这会创建并保存一个尚未定义用户的存储变量。
2. 调用utils.test.tsx并运行调用const store = makeStore({ user: { id_token: '1' } })的代码。
3. renderWithProvider ()渲染SomeComponent，然后调用userIsDefined函数。
4. if (state.user === undefined)返回 false，因为state.user仍未定义，我认为这是因为utils.ts在我调用自己的 makeStore ({ user: { id_token: '1 ' } }) ?

---

我想要的答案：我想确保当再次调用 makeStore() 时，它会更新utils.ts中使用的先前导入的 store 版本。有没有办法做到这一点，而不必使用useSelector()并将用户值从组件传递到我的 utils 函数？

例如，我可以做这样的事情，但我不想这样做，因为我有更多这些文件和函数，并且很大程度上依赖于import store from 'state/store'：

一些组件.tsx

  const SomeComponent = () => {
    const user = useSelector((state: IState) => state.user)
    if (userIsDefined(user) === false) return (<Forbidden/>)
    ...
  }

实用程序.ts

  //import store from 'state/store'
  const userIsDefined = (user) => {
    //const state = store.getState()
    if (user === undefined) return false
    ...
    return true
  }

正如我上面所说，我不想这样做。

---

（顺便说一句，我似乎无法为此创建一个小提琴，因为我不知道如何在测试和这个用例中做到这一点）

感谢您提供的任何帮助或推动正确的方向。

Answer 1

这只是发现应用程序中的一个错误：您正在使用直接访问store反应组件内部的方式，这是您永远不应该做的事情。当状态发生变化并失去同步时，您的组件将不会重新呈现。

如果你真的想要一个这样的助手，请用它制作一个自定义钩子：

  import store from 'state/store'
  const useUserIsDefined = () => {
    const user = useSelector(state => state.user)
    if (user === undefined) return false
    ...
    return true
  }

这样，您的助手不需要直接访问，store并且当存储值发生变化时，组件将正确重新呈现。