小编jma*_*svt的帖子

我正在尝试让Jest对我的React应用程序进行快照测试.我的package.json中的版本:

  "react": "15.6.1",
  "react-dom": "15.6.1",
  "react-test-renderer": "15.6.1",

我无法通过这个错误:

? Test suite failed to run


Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
  at Object.<anonymous> (node_modules/react-test-renderer/lib/ReactDebugTool.js:16:30)

我已经尝试删除并重新安装我的node_modules目录,我已经验证我的组件的路径是正确的但仍然得到同样的错误.

我的测试看起来像这样:

import React from 'react';
import renderer from 'react-test-renderer';
import { Section } from '../../app/views/containers/section';

it('renders correctly', () => {
  const section = renderer.create(
    <Section key="1" section="finance"/>
  ).toJSON();
  expect(section).toMatchSnapshot();
});

我究竟做错了什么？

我遇到了一个问题，Intl.NumberFormat即以与 Jest 期望的方式不同的方式格式化空格字符。使用不产生空格的值对同一函数进行测试，因为分隔符通过正常。Jest 正在考虑 4 和 5 字符之间的空格不同。我intl在我的应用程序和我的测试中都使用了fr_CA 的 polyfill。

这是我的函数，但唯一真正相关的部分是Intl.NumberFormat输出。如何协调空格字符的格式以便我的测试通过？

  export function formatCurrency( num, locale = 'en_US', showFractionDigits = false) {
    const options = {
        style: locale === 'fr_CA' ? 'decimal' : 'currency',
        currency: locale.length && locale.indexOf('CA') > -1 ? 'CAD' : 'USD'
    };

    const final = new Intl.NumberFormat(locale.replace('_', '-'), options).format(num);

    if (locale === 'fr_CA') {
        return `${final} $`;
    } else {
        return final;
    }
  }

我的主张：

expect(formatCurrency(24555.55, 'fr_CA', true)).toBe('24 555,55 $');

结果： …

最近 Chrome Dev Tools 添加了一个烦人的横幅，覆盖了控制台的顶部。除了每次都点击“X”之外，我如何才能永久禁用横幅？

我有这个React.js应用程序，它是一个简单的购物车应用程序。https://codesandbox.io/s/znvk4p70xl

问题是我正在尝试使用Jest和Enzyme对应用程序的状态进行单元测试，但似乎无法正常工作。这是我的Todo.test.js单元测试：

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Todo from '../components/Todo';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

test('Test it', async () => {
  // Render a checkbox with label in the document
  const cart = [
    { name: 'Green', cost: 4 },
    { name: 'Red', cost: 8 },
    { name: 'Blue', cost: 14 }
  ];

  const wrapper = mount(<Todo cart={cart} />); …

我在使用 sortBy 或 orderBy 按名称对数组进行排序时遇到问题，其中名称可能为空。我希望能够按名称升序 (AZ) 排序，并在末尾添加空值。

目前我的代码：

_sortBy(myArray, objectA => objectA.name)

将在开始时返回空值，然后继续对后面具有名称​​值的对象进行排序。

预先感谢您的任何帮助。

我在页面上有 div，我需要知道它与视口相关的右侧的位置。我试过这段代码：

const el = this.searchWrapper.getBoundingClientRect();
el.right 

但这不是我需要的，因为 getBoundingClientRect() 从左侧开始计算，但我需要计算元素和视口右侧之间的距离，如下面的屏幕所示

我正在尝试为 firebase 设置模拟器。我的应用程序是建立与https://redux-saga-firebase.js.org/的文件说要添加这样的代码来点应用到仿真器。或者也许是这些方向？

  const db = firebaseApp.firestore();

  // ADD THESE LINES
  if (window.location.hostname === "localhost") {
    console.log("localhost detected!");
    db.settings({
      host: "localhost:8080",
      ssl: false
    });
  }

这是我的文件，其中设置了 firebase。注意，firebaseApp初始化不同。

import * as firebase from 'firebase/app';
import '@firebase/firestore';
import ReduxSagaFirebase from 'redux-saga-firebase';
import { FIREBASE_CONFIG } from '../keys';

const config = FIREBASE_CONFIG;

export const firebaseApp = firebase.initializeApp(config);

export const rsf = new ReduxSagaFirebase(firebaseApp);

我添加了这个，但它仍然指向生产数据。

if (window.location.hostname === "localhost") {
    rsf.settings({
        host: "localhost:8080",
        ssl: false
    }); …

我正在构建一个进度条，它需要两个输入，totalSteps并且activeStep. 我将渲染一些等于总步骤数的圆圈，其中活动步骤为灰色。

我有映射对象数组的经验，但是在这种情况下，我没有数组，只是给出了一个整数。

我正在尝试编写一个div在 for 循环中返回 a 的函数，但这不起作用。

const ProgressBar = (props) => {
  const { activeStep, totalSteps } = props;

  const displayProgressBar = () => {
    for (let i = 1; i <= totalSteps; i++) {
      return <div>Hello</div>;
    }
  };
  return <div className="progressBar">{displayProgressBar()}</div>;
};

上面的代码Hello即使totalSteps是3也只渲染一次。有没有办法在不创建数组的情况下达到预期的结果？

我想在react应用程序中读取并打印当前URL。现在，我正在使用“ window.location.pathname”来读取URL，但想知道是否有更好的方法或某些反应方式来读取URL

不知道为什么我不能用谷歌搜索这个，但我似乎无法弄清楚如何在我的 create-react-app 的 webpack.config.prod.js 文件中代理我的 api 调用。将其放入 package.json 文件中是行不通的，因为我在本地需要不同的代理。

我已将其设置在 webpackDevServer.config.js 中，将其放入module.exports对象中效果很好。但当我在 webpack.config.prod.js 中执行相同操作时，它无法构建。如何为产品进行设置？

proxy: {
  '/myService/*': 'https://myServiceEndPoint/',
},