Preact testing

[fondberg]

Preact testing

[larrybotha]

ye there's definitely an advantage to using just dom-testing-library - take a look at all the additional helpers you get with react-testing-library:
https://github.com/testing-library/react-testing-library/blob/master/src/index.js#L60-L85 and
https://github.com/testing-library/react-testing-library/blob/master/src/index.js#L146-L147

react-testing-library is an extension of dom-testing-library, so you get all the goodness of one, with the benefits of the other.

The only thing to be aware of is that because react-testing-library isn't written for Preact there's always the risk that something may not work, or some API changes limiting how much you can use it.

At least one is able to write whatever helpers they want to address any issues - if say the render function stops working, you can always create and import your own render helper. The render function here can be moved to somewhere where you can easily imprt it into whichever test you want:

testing-javascript/07-use-dom-testing-library-to-test-any-js-framework/__tests__/preact.test.js

Lines 11 to 20 in 99b74fd

	const render = ui => {
	const container = document.createElement('div');
	Preact.render(ui, container);
	return {
	...getQueriesForElement(container),
	container,
	};
	};

I use this a ton in my projects; pretty much anything where you need a Provider you can write your own renderer, or even just a small wrapper that wraps your component inside a specific provider.

e.g.

// tests/utils/renderers.js
import {h} from 'preact';
import {render} from '@testing-library/react';

import {AuthProvider} from 'src/components/context/auth';

const withAuth = (ui, options = {}) => {
  return <AuthProvider value={options}>{ui}</AuthProvider>;
};

const renderWithAuth = (ui, options = {}) => {
  return render(withAuth(ui, options));
};

export {renderWithAuth, withAuth}

// index.test.js
...
import {render as renderTl} from '@testing-library/react';
import {renderWithAuth, withAuth} from 'utils/renderers.js';

const render = ui => {
  return renderWithAuth(ui);
}

test('-> renders', () => {
  const utils = render(<MyComponent />);
  // or
  const utilsAgain = renderTl(withAuth(<MyComponent />));

  // make assertions
})

By separating withAuth from renderWithAuth you can easily wrap multiple helpers for tests, e.g.:

const render = ui => {
  // Provide both auth and theme contexts to your component
  const renderWithAuth(withTheme(ui));
}

[fondberg]

Thanks for the thorough explanation. I've used the react testing library a lot but only with React so I guess I'll give it a shot with my preact project.

[larrybotha]

Ye, it's pretty painless! The only thing I've come across to look out for is the asynchronous rendering.

Kick some ass!