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