如何在反应组件的渲染函数中测试函数和变量？

Question

我正在尝试提高我的 react 组件的测试覆盖率，但是我在测试组件的 render 方法中声明的变量和函数时遇到了问题。以下是我无法涵盖的几个示例：

1)

cityStateZip = `${cityStateZip} - ${location.zipExtension}`;

2)

directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;

3)

const onClick = (pricingTileId) => {
  if (store.selectedPharmacy !== pricingTileId) {
    store.setPharmacy(pricingTileId);
  }
};

代码如下：

class Tile extends Component {
  const { location, store } = this.props;
  render() {
    let directionsUrl = `https://maps.google.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    if (navigator.platform.indexOf('iPhone') !== -1
      || navigator.platform.indexOf('iPod') !== -1
      || navigator.platform.indexOf('iPad') !== -1) {
      directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    }

    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`;
    if (location.zipExtension) {
      cityStateZip = `${cityStateZip} - ${location.zipExtension}`;
    }

    const onClick = (pricingTileId) => {
      if (store.selectedLocation !== pricingTileId) {
        store.setLocation(pricingTileId);
      }
    };

    let selectedClass;
    if (store.selectedLocation === id) {
      selectedClass = 'selected';
    }

    return (

    )

有没有一种有效的方法来测试我忽略的渲染函数中声明的变量和函数？ （我正在使用 Jest 和 Enzyme 进行测试）。谢谢！

Answer 1

你可以像这样重构你的组件：

class Tile extends Component {

  isMobile = () => {
    let mob = navigator.platform

    if (mob.indexOf('Iphone')) return true
    if (mob.indexOf('Ipad')) return true
    if (mob.indexOf('Ipod')) return true

    return false
  }

  isZipValid = () => !!this.props.location.zipExtension
  isLocationValid = (id) => this.props.store.location === id


  handleClick = (pricingTileId) => {
    const { store } = this.props;

    if (store.selectedLocation !== pricingTileId) {
      store.setLocation(pricingTileId);
    }
  }

  render() {


    let directionsUrl
    let selectedClass = isLocationValid() && 'selected';
    let cityStateZip = `${location.city}, ${location.state} ${location.zip}`;

    if (!isMobile()) {
      directionsUrl = `maps://maps.apple.com/?saddr=My+Location&daddr=${gpsCoords.lat}+${gpsCoords.lng}`;
    }

    if (isZipValid()) {
      cityStateZip = `${cityStateZip} - ${location.zipExtension}`;
    }
    return (
      <div> Anything</div>
    )
  }

..

============== 第 2 部分 ===================

您可以将它们提取到单独的文件中，例如 lib 或 helpers 然后将其导入您的组件。

像这样：

助手：

//helpers.js

export const isMobile = (mob) => {

    if (mob.indexOf('Iphone')) return true
    if (mob.indexOf('Ipad')) return true
    if (mob.indexOf('Ipod')) return true

    return false
  }

最后在组件上：

   export { isMobile } from './helpers'

   if(isMobile(navigator.platform)){

    //you just abstracted the function

   }

结论：您的isMobile() 可以很容易地从助手测试并提供给任何组件:)

现在您可以轻松地逐个测试功能

希望对你有帮助 :D

请，