在 Detox Testing 中加载 redux 存储初始状态答案

【问题标题】：Load redux store initial state in Detox Testing在 Detox Testing 中加载 redux 存储初始状态
【发布时间】：2018-08-25 12:54:31
【问题描述】：

问题

我们有一个相当复杂的应用程序，我们不希望在每个测试用例中都经历整个过程以到达特定的屏幕进行测试，或者我们只想跳转到特定的一个，其中一些状态存储在 redux 存储中。

我的尝试

我做了多个加载特定屏幕的初始状态，因此我可以直接对其进行测试，并且对于每次排毒测试，我加载不同的 mocha.opts 以选择这部分测试用例并使用“react-native-config”，以便我可以加载不同的状态在每次运行中，例如加载屏幕，我将执行以下操作：

为 redux 存储创建 initialState，其中包含我当前正在测试的屏幕的所有详细信息。
通过在其中指定 -f 标志创建 mocha.opts 以仅运行此测试用例。
创建 .env.test.screenX 文件，该文件将告诉商店根据我选择的 ENVFILE 加载哪个初始状态。
为 detox 中的每个屏幕创建不同的配置，以便它可以通过 detox CLI 加载正确的 mocha opts。
每次我运行命令 ENVFILE=env.test.screenX react-native run-ios 时都会使用此配置构建项目，然后我可以运行 detox test -c 。

问题

我的方法非常复杂，需要大量设置和开销来为每个屏幕运行测试，所以我想知道是否有人遇到同样的问题，我该如何解决？一般如何处理 detox 中的 react native 线程？

【问题讨论】：

没有真正的 react-native 和 detox 经验。但是在普通的 react/redux 应用程序中，您只需在每个测试用例中使用您需要的状态模拟 redux 存储。仅在您的设置中无法在测试用例级别解决此问题的任何原因？
您也可以使用 Detox 模拟您的状态。阅读我们关于模拟的文档。
@LeoNatan 能否请您提供我的案例的具体链接，提前谢谢。
就在那里，在文档中：github.com/wix/detox/blob/master/docs/Guide.Mocking.md我没有关于你的案例的具体信息。使用推荐的 API 来实现您想要的。
好的，但是如果我想为每个测试场景提供多个 e2e 文件，那是可行的@LeoNatan

标签： react-native redux react-redux detox redux-store

【解决方案1】：

我认为 detox 无法在运行时与反应本机线程通信并更改状态，所以我想到了一个使用模拟技术的小技巧，如 Leo Natan 提到的，它可能对你的情况有用

您可以使用屏幕 (App.e2e.js) 模拟您的 App.js 文件，该屏幕具有一些具有已知 testID 的按钮每个按钮调度加载特定状态所需的所有操作以进行存储，您可以通过以下方式启动每个测试套件按下beforeEach 方法中的一个按钮，然后您就可以开始正常的测试流程了

例如：

如果您想测试一个距离较远的屏幕（当用户实际使用应用程序时需要点击太多次才能到达）并且需要身份验证，您可以采用以下结构：

App.e2e.js 有 2 个按钮：

一个用于分派类似onAuthenticationSuccess(user, authToken) 的操作的身份验证
另一个导航到那个屏幕this.navigation.navigate("screenName")

test.js

describe("Screen work as intended", () => {
  beforeEach(async () => {
    await device.reloadReactNative();
    await element(by.id("authButtonID")).tap();
    await element(by.id("navigateButtonID")).tap();
  });

  it("should do something", async () => {
    //user is loaded in store
    //current screen is the screen you want to test
  });
});

【讨论】：

【解决方案2】：

如果您使用 Expo 并且它是 release-channels 用于指定环境，您可以执行以下操作：

创建一个方法resetStorage，就像这里建议的那样： How to reset the state of a Redux store?（您本可以在 logout 中实现）
在 App.js 中导入 resetStorage 方法
在 App.js 中添加：import { Constants } from 'expo'

然后将带有testID="resetStorageBtn" 的按钮添加到您的render 方法中，您可以将其用于测试目的，并且在生产发布渠道中不可见。所以render 可能看起来像这样：

return (
  <Root>
    {Constants.manifest.releaseChannel !== 'production' &&
        (<View>
          <Button onPress={() => resetStorage()} testID="resetStorageBtn">
            <Text>Reset storage</Text>
          </Button>
        </View>
      )}
    <View>
      <AppNavigator />
    </View>
  </Root>
);

【讨论】：