小编mav*_*ick的帖子

在Visual Studio Code中查看文件(由GIT生成)的代码差异时是否可以忽略空格？这对于在提交之前检查实际的代码添加/删除非常有帮助.

我正在使用React 测试库对我的 ReactJS 代码进行单元测试。UI 中有几个异步事件，例如获取数据和单击按钮时显示新页面。React 代码有点像这样：

// Inside ParentComponent.tsx
const [isChildVisible, setChildVisibility] = useState(false);
const showChild = () => setChildVisibility(true);

return(
  <>
      <button data-testid="show-child" onClick={showChild}>Show Child</button>
      {isChildVisible && <ChildComponent {..childProps}/>}
 </>
)

在ChildComponent安装时，它会获取一些数据，然后使用水合数据重新渲染自身。我的单元测试如下所示：

jest.mock('../../../src/service'); // mock the fetch functions used by ChildComponent to fetch its data

describe('ParentComponent', () => {
    test('renders ChildComponent on button click', async () => {
        const screen = render(<ParentComponent />);
        userEvent.click(screen.getByTestId('show-child'));
        await (waitFor(() => screen.getByText('text rendered by child')));
    });
});

当我运行此测试时，出现错误"TestingLibraryElementError: …

我正在使用vanilla JavaScript创建一个单页面应用程序.我想在不同的文件中组织我的代码以使其模块化,这意味着我应该能够访问另一个文件中的一个文件中定义的函数.我正在使用ES6本机import export:

文件-1.js:

export function func1() {}
export function func2() {}

文件-2.js:

import { func1, func2 } from './file-1';

index.html的:

<script src="file-1.js"></script>

当我在Chrome(版本65)中运行index.html时,出现以下错误: Uncaught SyntaxError: Unexpected token {.

我的代码有什么问题？Chrome 65完全支持ES6模块系统.

我有一个forwardRef像这样使用的 React 功能组件：

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default wrapper;

现在我想使用mapStateToPropsRedux 的connect函数将一些状态传递给这个组件，如下所示：

export default connect(mapStateToProps, null)(MyComponent);

我尝试以下列方式将它们组合起来，但没有奏效：

const wrapper = React.forwardRef((props, ref) => (
  <MyComponent {...props} innerRef={ref} />
));

export default connect(mapStateToProps, null)(wrapper);

如何将这两者结合起来以获得所需的行为？

我在我的机器上安装了Jest,并且jest从终端输入结果导致来自父级的测试也被执行.我想只从当前文件夹运行测试.

例如,如果我进入c:/dev/app终端并键入some-jest-command,它应该只运行文件夹中.test.js存在的app文件.目前,jest从app文件夹运行命令也会在父文件夹中运行测试,这不是我想要的行为.

我的网络应用程序中有一个模态，当用户单击“打开”按钮时，我想将其滑入。我正在使用react-transition-group来实现这一点。但我无法让动画工作。不知道这里有什么问题？

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';

import './styles.css';

class Example extends React.Component {
  state = {
    isOpen: false,
  };

  toggleModal = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen,
    }));
  };
  render() {
    const modalStyles = {
      overlay: {
        backgroundColor: '#ffffff',
      },
    };
    return (
      <div>
        <button onClick={this.toggleModal}>
          Open Modal
        </button>
        <CSSTransition
          in={this.state.isOpen}
          timeout={300}
          classNames="dialog"
        >
          <Modal
            isOpen={this.state.isOpen}
            style={modalStyles}
          >
            <button onClick={this.toggleModal}>
              Close Modal
            </button> …

所以我以为我理解了JavaScript的提升，直到看到如下内容：

function hoist(a) {
    console.log(a);
    var a = 10;
}

hoist(5);

上面的代码输出5，不是undefined！根据我的理解，该函数在解释器中看起来像这样：

function hoist(a) {
    var a;  // This should overshadow the parameter 'a' and 'undefined' should be assigned to it
    console.log(a);  // so this should print undefined
    a = 10;  // now a is assigned 10
}

那么这是怎么回事？

在JavaScript中解构嵌套对象时，是否可以重命名变量？考虑以下代码：

const obj = {a: 2, b: {c: 3}};
const {a: A, b:{c}} = obj;

如何重命名c在上面的代码就像我改名a来A？const {a: A, b:{c}: C} = obj不起作用。

在单元测试中，我想测试父组件是否成功呈现了其子组件。这是代码：

describe('Parent Component', () => {
  it('renders Child component', () => {
    const wrapper = shallow(<Parent store={store} />);
    expect(wrapper.find(Child).length).toEqual(1);
  });
});

上级：

const Parent = observer(({ store }) => {
  const bookList = toJS(store.planets);
  return (
    <div>
      <div className={style.planet_container}>
        {bookList.map(book => {
          return <Child key={book.name} name={book.name} />;
        })}
      </div>
    </div>
  );
});

上面的代码是从这里获取的，但是它不起作用。我收到以下错误：

预期1，收到0'

我要去哪里错了？我在Jest 23.1.0中使用酶3.3。

我是 Angular 2 和 Typescript 的新手，并试图了解 DI。在我看到的所有代码中，我看到引用服务的变量被输入到构造函数中。这是为什么？为什么我们不能在构造函数之外而是在类中声明它？

考虑以下来自英雄之旅的代码，例如在 Angular 网站上：

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: `dashboard.component.html`,
    styleUrls: ['dashboard.component.css']
})
export class DashboardComponent implements OnInit {

    heroes: Hero[] = [];

    constructor(private heroService: HeroService) { }

    ngOnInit(): void {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes.slice(1, 5));
    }
}

如果我像下面这样在构造函数之外声明 heroService，应用程序会抛出许多错误。

export class DashboardComponent implements OnInit {

    heroes: Hero[] = [];

    constructor() { …