Allow null override for default component

[dhaigh]

the docs state that render={null} or component={null} should override the defaultComponent prop. (https://github.com/lingui/js-lingui/blame/v3.0.0/docs/ref/react.rst#L88)

suppose I had this

const Span = ({ children }) => {
    return <span>{children}</span>;
};

const App = () => {
    return (
        <I18nProvider i18n={i18n} defaultComponent={Span}>
            <Trans id='Hello' render={null} />
        </I18nProvider>
    );
};

current behaviour: <App /> === <span>Hello</span>
expected behaviour:<App /> === 'Hello'

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/lingui-js/js-lingui/llimgu2ze
✅ Preview: https://js-lingui-git-main.lingui-js.vercel.app

[codecov]

Codecov Report

Merging #799 into main will decrease coverage by 0.13%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##             main     #799      +/-   ##
==========================================
- Coverage   84.33%   84.20%   -0.14%     
==========================================
  Files          39       39              
  Lines        1264     1266       +2     
  Branches      332      333       +1     
==========================================
  Hits         1066     1066              
- Misses        116      117       +1     
- Partials       82       83       +1     

Impacted Files	Coverage Δ
packages/react/src/Trans.tsx	71.42% <0.00%> (-5.50%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de7d07e...52f5991. Read the comment docs.

[tricoder42]

Hey @dhaigh, thanks for the bug fix! You're right. Could you also please provide a test? Just add relevant test cases to rendering section in Trans.test.tsx:

js-lingui/packages/react/src/Trans.test.tsx

Lines 139 to 204 in de7d07e

	describe("rendering", function () {
	it("should render just a text without wrapping element", function () {
	const txt = html(<Trans id="Just a text" />)
	expect(txt).toEqual("Just a text")
	})
	it("should render custom element", function () {
	const element = html(<Trans render={({ id, translation }) => <h1 id={id}>{translation}</h1>} id="Headline" />)
	expect(element).toEqual(`<h1 id="Headline">Headline</h1>`)
	})
	it("should render function", function () {
	const spy = jest.fn()
	text(
	<Trans
	id="ID"
	message="Default"
	render={(props) => {
	spy(props)
	return null
	}}
	/>
	)
	expect(spy).toHaveBeenCalledWith({
	id: "ID",
	message: "Default",
	translation: "Translation",
	})
	})
	it("should take defaultComponent prop with a custom component", function () {
	const ComponentFC: React.FunctionComponent = (props: { children?: React.ReactNode }) => {
	return (<div>{props.children}</div>)
	}
	const span = render(
	<I18nProvider i18n={i18n} defaultComponent={ComponentFC}>
	<Trans id="Just a text" />
	</I18nProvider>
	).container.innerHTML
	expect(span).toEqual(`<div>Just a text</div>`)
	})
	})
	describe("component prop rendering", function() {
	it("should render class component as simple prop", function () {
	class ClassComponent extends React.Component {
	render() {
	return (
	<div>Headline</div>
	)
	}
	}
	const element = html(<Trans component={ClassComponent} id="Headline" />)
	expect(element).toEqual("<div>Headline</div>")
	})
	it("should render functional component as simple prop", function () {
	const ComponentFC: React.FunctionComponent = (props: { id: any, children?: React.ReactNode }) => {
	const [state] = React.useState("value")
	return <div id={props.id}>{state}</div>
	}
	const element = html(<Trans component={ComponentFC} id="Headline" />)
	expect(element).toEqual(`<div>value</div>`)
	})
	})

[dhaigh]

@tricoder42 i had a go, let me know what you think :)

[tricoder42]

Pretty good!

[tricoder42]

Released in 3.0.1. Thank you for your contribution! 👍