小编Mat*_*bbs的帖子

我正在尝试使用react-testing-library运行一个非常简单的测试，其中为按钮提供了模拟函数，单击该按钮，然后测试检查该函数是否被调用。但是，测试当前失败，因为未调用该函数。这是代码：

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Button', () => {
  test('eventHandler called on click', () => {
    const handleClick = jest.fn();
    render(
      <button onClick={handleClick} type="button">
        Click Me
      </button>
    );

    userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

没有抛出任何错误，成功找到按钮，但由于某种原因，该函数没有注册它已被调用。

任何帮助，将不胜感激！

我是React-Redux生态系统的新手,通过尝试简单的应用程序来学习.在这种情况下,我正在尝试如何在react-redux应用程序中工作.基本上,这个想法是:

1. 单击链接(反应路由器组件)导航到新页面
2. 成功完成分派的异步操作后,导航到新页面.

这是我的代码

import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-redux'

class App extends React.Component {
  render() {
    // And you have access to the selected fields of the State too!
    return (
        <div>
            <header>
                Links:
                {' '}
                <Link to="/">Home</Link>
                {' '}
                <Link to="/foo">Foo</Link>
                {' '}
                <Link to="/bar">Bar</Link>
            </header>
            <div>
                <button onClick={() => routerActions.push('/foo')}>Go to /foo</button>
            </div>
        </div>
    )
  }
}
export default connect(null, null)(App);
===================================================================
import React from 'react'
import …

我已经使用 Ag-Grid 的企业功能“ agSetColumnFilter ”几个月了，没有出现任何问题。

我正在使用以下版本：

    "ag-grid": "^17.1.1",
    "ag-grid-enterprise": "^17.1.1",
    "ag-grid-react": "^17.1.0",

经过一些重构后，只需单击过滤器菜单后，我就开始收到此错误：

ag-grid: Looking for component [agSetColumnFilter] but it wasn't found.
Array.concat.ComponentProvider.retrieve @ componentProvider.js?6ebb:209
Array.concat.ComponentResolver.resolveByName @ componentResolver.js?1587:159
Array.concat.ComponentResolver.getComponentToUse @ componentResolver.js?1587:155
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:271
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ standardMenu.js?505d:52
Array.concat.StandardMenuFactory.showMenuAfterButtonClick @ standardMenu.js?505d:45
Array.concat.HeaderComp.showMenu @ headerComp.js?f669:122
(anonymous) @ headerComp.js?f669:107
componentResolver.js?1587:274 Error creating component filter=>agTextColumnFilter
Array.concat.ComponentResolver.newAgGridComponent @ componentResolver.js?1587:274
Array.concat.ComponentResolver.createAgGridComponent @ componentResolver.js?1587:236
Array.concat.FilterManager.createFilterInstance @ filterManager.js?d1c0:376
Array.concat.FilterManager.createFilterWrapper @ filterManager.js?d1c0:393
Array.concat.FilterManager.getOrCreateFilterWrapper @ filterManager.js?d1c0:343
Array.concat.StandardMenuFactory.showPopup @ …

我正在使用 redux-persist 并且尝试渲染一个屏幕，并将其传递给 PersistGate 的加载属性。

我做了一些研究，发现我应该将 REHYDRATE 发送到减速器，但这也不起作用。

也许我没有很好地配置我的减速器？我还希望能够将 loading 属性设置为 null 以避免应用程序渲染之前出现闪屏，但结果与向其传递一个要渲染的组件相同。

这是我的index.js代码

import App from './App';
import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react';
import { SplashScreen } from './src/screens/SplashScreen';
import configureStore from './src/store/configureStore';

const store = configureStore();
const persistor = configureStore();

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={<SplashScreen/>} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

componentDidMount = () => {
    this.persistor.dispatch({ …

我真的对这段代码感到困惑。我只想知道我们如何将参数传递给reducer(state, action)函数。我的主要问题是：action 参数如何发送到我的 Comments.js 文件中的 reducer 函数？我什至没有导入 ActionCreator.js 文件，但我能够使用和评论返回的有效负载值。这怎么可能？有人，请以透明的方式向我解释这一点。

请原谅我的代码片段编辑

 /ActionTypes.JS
  export const ADD_COMMENT='ADD_COMMENT';
 /ActionCreator.js

 import * as ActionTypes from './ActionTypes';


 export const addComment=(dishId, rating, author, comment)=>({
     type:ActionTypes.ADD_COMMENT,
     payload:{
     dishId:dishId,
     rating:rating,
     author:author,
     comment:comment
     }
 })

/Comments.js
import {COMMENTS} from "../shared/comments";
import * as ActionTypes  from "./ActionTypes"
export const Comments=(state=COMMENTS, action)=>{
    switch(action.type){
        case ActionTypes.ADD_COMMENT:
            var comment=action.payload;
            comment.id=state.length
            comment.date=new Date().toISOString()
            console.log("Comment" + comment)
            return state.concat(comment)
        default:
            return state;
    }
}

我正在将我的博客从 Sapper 迁移到 SvelteKit。我使用 markdown 编写了博客文章，并且使用Markdownjs导入 markdown 文件并将其导出到我的组件中。然而，这种方法似乎不适用于 SvelteKit。

我该如何使用 SvelteKit 来做到这一点？我需要 Vite 插件吗？

我正在尝试在redux状态下更新对象数组，

汽车Redux状态

cars:  [
  {
    _id:"5b61b782719613486cdda7ec",
    car: "BMW",
    year: '2015'
   },
   {
      _id:"5b61b782719613486cdda7e1",
      car: "Toyota",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e2",
      car: "Honda",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2015'
    }
 ]

action.payload数组

 action.payload :      
   [
    {
      _id:"5b61b782719613486cdda7ec",
      car: "BMW",
      year: '2019'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2019'
    }
  ]


case UPDATE_CARS:
  const updatedCars = state.cars.map((car) => {
  action.payload.forEach((newCars, index) => {
    if (car._id !== newCars._id) {
      //This is not the item we care about, keep it as …