【问题标题】:How can I import a redux saga yield into my detox + jest test file. I need gain access to data stored in the redux store in my test setup如何将 redux saga yield 导入我的 detox + jest 测试文件。我需要在我的测试设置中访问存储在 redux 存储中的数据
【发布时间】:2018-08-17 22:33:24
【问题描述】:

这是一个 react-native 应用程序,我目前正在编写一些端到端测试。

一个令牌存储在如下所示的 redux 存储中,我正在使用 detox/jest 测试登录功能。我需要检测令牌是否存在于我的 login.spec.js 的商店中。如果令牌存在,我想将其从商店中擦除,这样当我重新加载应用程序以将用户带回另一个场景时,用户不会自动登录。有问题的主要功能是 refreshUserToken() 和行:-

const { refresh_token } = yield select(token);

这里是 redux saga 文件 User.js 位于:-MyApp/App/Sagas/User.js

import { call, put, takeEvery, select } from "redux-saga/effects";
import Config from "MyApp/App/Config";
import API from "MyApp/App/Services/API";
import { when } from "MyApp/App/Helpers/Predicate";
import Credentials from "MyApp/App/Helpers/Credentials";
import ActionCreator from "MyApp/App/Actions";

const appendPayload = payload => {
  return {
    ...payload,
    // Removed because no longer needed unless for testing purposes.
    // username: Config.TEST_USERNAME,
    // password: Config.TEST_PASSWORD,
    client_id: Config.CLIENT_ID,
    client_secret: Config.CLIENT_SECRET,
  };
};

const token = state => state.token;

const user = state => state.user;


const attemptUserLogin = function*(action) {
  const { payload } = action;
  const login = "/oauth/token";
  const grant_type = "password";
  const loginPayload = appendPayload(payload);

  action.payload = {
    ...loginPayload,
    grant_type,
  };

  yield attemptUserAuthorisation(login, action);
};

const attemptUserRegister = function*(action) {
  const register = "/api/signup";
  const { payload } = action;
  yield Credentials.save(payload);
  yield put(ActionCreator.saveUserCredentials(payload));
  yield attemptUserAuthorisation(register, action);
};

const refreshUserToken = function*(action) {
  const login = "/oauth/token";
  const grant_type = "refresh_token";
  const { refresh_token } = yield select(token);

  action.payload = {
    ...action.payload,
    grant_type,
    refresh_token,
  };
  yield attemptUserAuthorisation(login, action);
};

const watchExampleSaga = function*() {
  yield takeEvery(ActionCreator.AUTO_USER_LOGIN, autoUserLogin);
  yield takeEvery(ActionCreator.USER_LOGIN, attemptUserLogin);
  yield takeEvery(ActionCreator.USER_REGISTER, attemptUserRegister);
  yield takeEvery(ActionCreator.USER_REFRESH_TOKEN, refreshUserToken);
};

export default watchExampleSaga;

这是我的 detox/jest 规范文件,位于:-MyApp/App/e2e/login.spec.js

    describe('Login Actions', () => {

  it('Should be able to enter an email address', async () => {
    await element(by.id('landing-login-btn')).tap()
    const email = 'banker@dovu.io'

    await element(by.id('login-email')).tap()
    await element(by.id('login-email')).replaceText(email)
  });

  it('Should be able to enter a password', async () => {
    const password = 'secret'

    await element(by.id('login-password')).tap()
    await element(by.id('login-password')).replaceText(password)
  });

  it('Should be able to click the continue button and login', async () => {
    await element(by.id('login-continue-btn')).tap()
    await waitFor(element(by.id('dashboard-logo'))).toBeVisible().withTimeout(500)

    // If token exists destroy it and relaunch app. This is where I need to grab the token from the redux saga!
    await device.launchApp({newInstance: true});
  });
})

【问题讨论】:

    标签: react-native redux react-redux jestjs redux-saga


    【解决方案1】:

    这就是我处理类似情况的方式:

    在 package.json 脚本中: "start:detox": "RN_SRC_EXT=e2e.tsx,e2e.ts node node_modules/react-native/local-cli/cli.js start",

    在我的排毒配置中: "build": "ENVFILE=.env.dev;RN_SRC_EXT=e2e.tsx,e2e,ts npx react-native run-ios --simulator='iPhone 7'",

    这让我可以编写 MyFile.e2e.tsx,它在 detox 运行时替换 MyFile.tsx

    在该组件的测试版本中,我有在测试中点击的按钮,并且按钮调度 redux 操作

    【讨论】:

      【解决方案2】:

      看起来这实际上无法完成,除非有人可以给我一个解决方案,而不是模拟状态,在这种情况下仍然无法正常工作,我的应用会检查真实状态以自动登录。

      我确实进入了创建新操作 getUserToken 并将其导出到我的 jest 文件中的阶段。但是,该操作返回 undefined,因为 jest 文件需要像 container.js 中那样的调度方法。如果有人能用玩笑为我提供这种方法,我会很高兴。

      【讨论】:

        猜你喜欢
        • 2018-01-22
        • 2018-09-20
        • 2018-01-04
        • 1970-01-01
        • 1970-01-01
        • 2018-06-10
        • 1970-01-01
        • 1970-01-01
        • 2017-02-26
        相关资源
        最近更新 更多