使用preloadedState进行测试:在函数中手动导入存储时，redux存储无法同步
我正在编写使用和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
}就像我前面说的，我不喜欢这样做。
(顺便说一句，我不知道如何在测试和用例中创建小提琴)
谢谢你的任何帮助或推动朝正确的方向。
回答 1
Stack Overflow用户
发布于 2021-04-01 11: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
}这样，您的助手就不需要直接访问store，并且当存储值发生变化时，组件将正确地重新复制。
https://stackoverflow.com/questions/66902685
复制相似问题
腾讯云开发者
