0

I am trying to do screen testing with react native while mocking the api responses with Nock. After a call to the api my component is supposed to display some text fields. It works on the app but I can't make the test working.

Here is the component code :

export const CreationPage = () => {

    const [publicSuites, setPublicSuite] = useState<Suite[]>([])

    useEffect(() => {
        axios.get('http://localhost:8080/api/suites').then((response) => {
            console.log('It worked !', response.data)
            setPublicSuite(response.data)
        }, (error) => {
            console.log('Oups something went wrong :', error)
        })
    }, [])

    return (
        <View>
            {publicSuites.map((suite) =>
                <Card key={suite.title}>
                    <Text>{suite.title}</Text>
                </Card>
            )}
        </View>
    )
}

And here the testing code :

it("should display public & private (hidden but visible in DOM) elements at launch", async () => {
    render(<CreationPage/>);

    nock('http://localhost:8080')
        .get('/api/suites')
        .reply(200, [{title: "Public Suite Test"}])


    // Tab Switch cannot be tested
    await waitFor(() => {
        expect(screen.getByText("Public Suite Test")).toBeTruthy()
    })
});

The logs I get :

console.log
  Oups something went wrong : AxiosError {
    port: 8080,
    address: '127.0.0.1',
    syscall: 'connect',
    code: 'ECONNREFUSED',

...

Error: Unable to find an element with text: Public Suite Test
Antoine Grenard
  • 1,712
  • 3
  • 21
  • 41

0 Answers0