Hello! I believe I discovered a new issue when working with Airtable’s automated testing feature. Here is my sample component:
import React from 'react';
import { useBase, useRecords } from '@airtable/blocks/ui';
const Main = () => {
const base = useBase();
// Table and view name will vary depending on your base
const view = base.getTableByName('Component Table').getViewByName('Potluck Volunteer Sheet');
const records = useRecords(view);
return (
<div>
<h1>Testing useRecords</h1>
<p>{records.length} records found for {view.name}</p>
</div>
);
};
export default Main;
And here is the example unit test:
import React from 'react';
import TestDriver from '@airtable/blocks-testing';
import { render, screen } from '@testing-library/react'
import Main from './main';
import { fixtureData } from './fixture';
const testDriver = new TestDriver(fixtureData);
describe('main', () => {
it('renders correctly', () => {
render(
<testDriver.Container>
<Main />
</testDriver.Container>
);
screen.debug();
});
});
Everything renders as expected in my custom app on Airtable. However nothing gets rendered inside my unit test. I believe the cause is in useLoadable: isDataLoaded is true in Airtable but false when testing so we enter suspense mode. From here the process hangs. I’ve tried disabling suspense mode which resulted in an error, and I’ve also tried setting jest’s timeout past the length of the suspense promise (60000ms) with no result.
I know that automated testing is still in beta, so this could just be one of the kinks getting ironed out. Can anyone chime in if they’ve seen this before and provide some insight to potential workarounds?
