问使用preloadedState进行测试:在函数中手动导入存储时，redux存储无法同步
EN

Stack Overflow用户

提问于 2021-04-01 02:18:37

回答 1查看 1.4K关注 0票数 3

我正在编写使用和jest进行反应的测试，并且当另一个文件导入存储时，我遇到了一些问题，无法解决如何为redux存储设置preloadedState。

我有这样一个功能来建立我的商店

store.ts

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

另一个像这样的js文件

utils.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
      );
    })
  })

然后调用utils.ts中的函数。

SomeComponent.tsx

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

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

utils.ts读取并从‘/存储’读取行导入存储，这将创建并保存用户尚未定义的存储变量。调用utils.test.tsx的
并运行调用const =makeStore的代码({ user：{ id_token：'1‘} }).
The renderWithProvider()呈现SomeComponent，后者又调用userIsDefined function.
The if (state.user ===未定义)返回false，因为state.user仍未定义，我认为这是因为utils.ts导入了商店，就像我调用自己的makeStore({ user：{ id_token：'1‘})之前一样。

我想要的答案是:我想确保当再次调用makeStore()时，它会更新utils.ts中使用的以前导入的存储版本。是否有一种无需使用useSelector()并将用户值从组件传递给我的utils函数的方法？

例如，我可以这样做，但我不想这样做，因为我有更多的这些文件和函数，并且很大程度上依赖于来自'state/ store '的导入存储

SomeComponent.tsx

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

utils.ts

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

就像我前面说的，我不喜欢这样做。

(顺便说一句，我不知道如何在测试和用例中创建小提琴)

谢谢你的任何帮助或推动朝正确的方向。

react-testing-library

reactjs

typescript

redux

jestjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-01 03:48:42

这只是在您的应用程序中发现了一个bug :您正在使用react组件中对store的直接访问，这是您永远不应该做的事情。当状态发生变化并失去同步时，组件将不会重命名。

如果你真的想要这样的帮手，用它做一个定制的钩子：

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