javascript - React (Native) 设置 Jest 来测试 Context 组件

Question

React Context API 允许我将应用程序状态的逻辑放在一个地方(并避免 redux)。现在看起来像这样

// Using the Context API used in react 16.3 - https://www.youtube.com/watch?v=XLJN4JfniH4
const { Provider, Consumer: ContextConsumer } = React.createContext()

class ContextProvider extends Component {

  ...// lot of functions ...

  render() {
    return (
      <Provider
        value={{
          ...this.state,
          getDose: this.getDose,
          getDoseRange: this.getDoseRange,
          setDose: this.setDose,
          checkIN: this.checkIN,
          checkOUT: this.checkOUT,
          getFalsifiedDrug: this.getDefaultproductData,
          updatePrescriptionDose: this.updatePrescriptionDose,
        }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

module.exports = { ContextConsumer, ContextProvider }

可以找到完整的代码here .

构建可让我测试功能且不会弄乱状态的 Jest 测试的最佳实践是什么？

(希望避免使用 Enzyme(由 AirBnB 开发)- 自 AirBnB officially gave up using React Native 起)

例子

当我调用 setDose(2) 时，如何进行测试以确认这一点？那productData.dose从 "5 mg" 更改为现在等于 "2 mg .但随后将状态设置回 "5 mg"用于其他测试。

奖金信息

我在获取 jest 时遇到了一些问题与我一起工作(这样我就可以尝试建议的解决方案)

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "test": "jest --watchAll"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "crypto-js": "^3.1.9-1",
    "date-fns": "^1.29.0",
    "expo": "^28.0.0",
    "invert-color": "^1.2.3",
    "lodash": "^4.17.10",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
    "react-native-qrcode": "^0.2.6",
    "react-native-slider": "^0.11.0",
    "react-native-switch": "^1.5.0",
    "react-navigation": "2.3.1",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-preset-expo": "^5.0.0",
    "eslint": "^5.16.0",
    "eslint-config-codingitwrong": "^0.1.4",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jest": "^22.5.1",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.13.0",
    "jest-expo": "^32.0.0",
    "react-native-testing-library": "^1.7.0",
    "react-test-renderer": "^16.8.6"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

它只是把这个扔给我

> @ test /Users/norfeldt/Desktop/React-Native/MedBlockChain
> jest --watchAll

● Validation Error:

  Module react-native/jest/hasteImpl.js in the haste.hasteImplModulePath option was not found.
         <rootDir> is: /Users/norfeldt/Desktop/React-Native/MedBlockChain

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

npm ERR! Test failed.  See above for more details.

我试过类似的东西

rm -rf node_modules/ yarn.lock package-lock.json && npm install

Answer 1

您可以使用 react-test-renderer你已经在你的项目规范中使用了。
你需要的是调用testRenderer.getInstance() => 检查当前的 state => 调用一些你需要测试的方法 => 检查更新的 state:

import React from "react";
import { create } from "react-test-renderer";
import { ContextProvider } from "../Context";

describe("ContextProvider", () => {
  test("it updates dose correctly", () => {
    const component = create(<ContextProvider />);
    const instance = component.getInstance();

    expect(instance.getDose()).toBe(5);
    expect(instance.state.productData.dose).toBe("5 mg");

    instance.setDose(2);

    expect(instance.getDose()).toBe(2);
    expect(instance.state.productData.dose).toBe("2 mg");
  });

  test("it updates something else correctly", () => {
    // ...
  });
});

其他测试的状态不会受到影响。

我唯一需要做的就是按照 here 中的描述，npm install whatwg-fetch@2.0.4 --save .希望这会有所帮助。

更新

尽管这应该是另一个问题，而且显而易见的解决方案是创建一个新的 rn 项目并将代码复制到其中，但这是我为修复 jest 错误所做的工作你的代码:

1) 使版本匹配(如评论中所述...):

"expo": "^32.0.0",
"jest-expo": "^32.0.0",
// and maybe even
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",

2) 修复错误

api.caller is not a function

按照描述使用 babel.config.js here :

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      development: {
        plugins: ["transform-react-jsx-source"]
      }
    }
  };
};

3) 由于 this，使用 yarn