gpt4 book ai didi

react-native - react native 测试-立即行动

转载 作者:行者123 更新时间:2023-12-03 14:52:30 24 4
gpt4 key购买 nike

未通过测试,但是我两次收到以下警告,但我不知道为什么。有人可以帮我弄清楚吗?

    console.error
Warning: You called act(async () => ...) without await. This could lead to unexpected testing behaviour, interleaving multiple act calls and mixing their scopes. You should - await act(async () => ...);
at printWarning (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:120:30)
at error (../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:92:5)
at ../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14953:13
at tryCallOne (../../node_modules/react-native/node_modules/promise/lib/core.js:37:12)
at ../../node_modules/react-native/node_modules/promise/lib/core.js:123:15
at flush (../../node_modules/asap/raw.js:50:29)
import { fireEvent } from '@testing-library/react-native'
import { renderScreen } from 'test/render'

describe('screens/home', () => {
it('should render and redirect to the EventScreen', async () => {
const {
getByA11yLabel,
findByA11yLabel,
findAllByA11yLabel,
toJSON
} = renderScreen('Main')
expect(toJSON()).toMatchSnapshot('Default render')

const title = 'New event'
const titleInput = getByA11yLabel('event.title')

// Change title - sync fn
fireEvent.changeText(titleInput, title)

// Create button should be visible
const createButton = await findByA11yLabel('event.create')
expect(titleInput.props.value).toBe(title)
expect(createButton).toBeTruthy()
expect(toJSON()).toMatchSnapshot('Change title')

// Create event - async fn
fireEvent.press(createButton)

// The app should be redirected to the EventScreen
const titleInputs = await findAllByA11yLabel('event.title')
const upsertButton = await findByA11yLabel('event.upsert')
expect(toJSON()).toMatchSnapshot('Create event')
expect(titleInputs).toHaveLength(2)
expect(titleInputs[0].props.value).toBe('') // @MainScreen
expect(titleInputs[1].props.value).toBe(title) // @EventScreen
expect(upsertButton).toBeTruthy()
})
})

据我所知,不需要用 fireEvent包装 act- link
  • findBy*也将自动用act包装-link
  • 相关的issue in GitHub仍在打开

  • 依存关系:
  • react :16.13.1
  • 博览会:39.0.4
  • 开玩笑:26.6.3
  • ts-jest:26.4.4
  • jest-expo:39.0.0
  • @ testing-library/jest-native:3.4.3
  • @ testing-library/react:11.2.2
  • @ testing-library/react-native:7.1.0
  • react-test-renderer:16.13.1
  • typescript :4.1.2
  • 最佳答案

    我面临着同样的问题。就我而言,我在组件中使用了useEffect。在测试时,它提示我将渲染结果包装在act()调用中。一旦我做到了,即act(async () => ...),我的最初问题就解决了,但是我遇到了上面提到的错误(Warning: You called act(async () => ...) without await.)。我必须在测试中使用await act(async () => ...)来解决此问题。尽管我仍然不确定为什么要这样做。
    供引用,我使用await act(async () => ...);添加了完整的示例组件和相应的测试LocationComponent.tsx

    /** @jsx jsx */
    import { jsx } from 'theme-ui';
    import { FunctionComponent, useEffect, useState } from 'react';

    type Coordinate = {
    latitude: number;
    longitude: number;
    };

    const LocationComponent: FunctionComponent<any> = () => {
    const [coordinate, setCoordinate] = useState<Coordinate>();
    const [sharedLocation, setSharedLocation] = useState<boolean>();
    useEffect(() => {
    let mounted = true;

    if (!coordinate && navigator) {
    navigator.geolocation.getCurrentPosition(function (position) {
    setCoordinate({
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
    });
    });
    navigator.permissions
    .query({ name: 'geolocation' })
    .then(function (result) {
    if (mounted) setSharedLocation(result.state === 'granted');
    });
    }

    return () => (mounted = false);
    });

    return (
    <>
    <div>Location shared:{sharedLocation ? 'Yes' : 'No'}</div>
    <div>Latitude:{coordinate?.latitude}</div>
    <div>Longitude:{coordinate?.longitude}</div>
    </>
    );
    };
    export default LocationComponent;
    LocationComponent.spec.tsx
    import React from 'react';
    import { render, waitFor } from '@testing-library/react';
    import { act } from 'react-dom/test-utils';
    import LocationComponent from '../../../../../src/components/scheduler/location/LocationComponent';

    const TEST_COORDS = {
    latitude: 41.8817089,
    longitude: -87.643301,
    };

    global.navigator.permissions = {
    query: jest
    .fn()
    .mockImplementationOnce(() => Promise.resolve({ state: 'granted' })),
    };

    global.navigator.geolocation = {
    getCurrentPosition: jest.fn().mockImplementationOnce((success) =>
    Promise.resolve(
    success({
    coords: TEST_COORDS,
    })
    )
    ),
    };

    describe("Location Component when location share is 'granted'", () => {
    it('should display current location details', async () => {
    await act(async () => {
    const { getByText } = render(<LocationComponent />);

    /*expect(
    await waitFor(() => getByText('Location shared:Yes'))
    ).toBeInTheDocument();*/
    expect(
    await waitFor(() => getByText('Latitude:41.8817089'))
    ).toBeInTheDocument();
    expect(
    await waitFor(() => getByText('Longitude:-87.643301'))
    ).toBeInTheDocument();
    });
    });
    });

    关于react-native - react native 测试-立即行动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64952449/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com