小编Анн*_*нна的帖子

如何测试由 useEffect 上触发的 SetTimeout 修改的组件样式?

我正在使用 Jest/Enzyme 来测试 React/TypeScript 应用程序,并且我很难尝试编写一个测试来断言按钮是否在一段时间后显示:

这是要测试的组件的非常简化的版本:

import { StyledNotifyButton } from './styles'; //style-component element

const SomeComponent = (): ReactElement => {
  const [showNotifyButton, toggleNotifyButton] = useState(false);

  useEffect(() => {
    setTimeout(() => toggleNotifyButton(true), 5000);
  }, [toggleNotifyButton]);

  return (
    <div>
      <StyledNotifyButton visible={showNotifyButton} />
    </div>
  );
Run Code Online (Sandbox Code Playgroud)

这是测试:

 describe('< FailingTest >', () => {
  let wrapper: ReactWrapper;

  beforeAll(() => {
    wrapper = mount(<SomeComponent />);
  });

  it('should display the notify button only after X seconds', done => {
    let notifyButton = wrapper.find('StyledNotifyButton');

    jest.spyOn(React, 'useEffect').mockImplementation(f => …
Run Code Online (Sandbox Code Playgroud)

reactjs jestjs enzyme ts-jest react-hooks

5
推荐指数
1
解决办法
5090
查看次数

React Function 组件方法在定义之前使用;这真的是一个问题吗?

各位开发人员大家好,

我有这个问题,但我的同事们似乎没有达成一致。

考虑到 JS 提升以及组件安装时不会调用函数表达式,似乎可以安全地假设我们不会因声明违反“定义之前使用”的方法而遇到任何问题。

但我想知道忽略 lint 关于它的警告并按字母顺序或根据逻辑块或其他方式声明组件的函数是否安全......?即使首先声明的函数调用稍后声明的另一个函数?

例如(这只是一个具有大量功能的大型功能组件的简化,其他开发人员很难围绕所有功能进行组织):

const SomeRandomFC = () => {

  // User logics
    const changeUser = id => {
    if (id !=== currentId) {
      getDatabase(id);
    }
    const getUser = id => ...

 // Database logics
   const getDatabase = user => [fetch logics];
   const updateDatabase = id => ... 

}
Run Code Online (Sandbox Code Playgroud)

谢谢!

javascript hoisting eslint react-functional-component

0
推荐指数
1
解决办法
2127
查看次数