diff --git a/app/soapbox/components/hashtag.js b/app/soapbox/components/hashtag.js
index d74911f2e6..1b19bbff3f 100644
Binary files a/app/soapbox/components/hashtag.js and b/app/soapbox/components/hashtag.js differ
diff --git a/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
new file mode 100644
index 0000000000..f2d310c555
--- /dev/null
+++ b/app/soapbox/features/ui/components/__tests__/trends-panel.test.tsx
@@ -0,0 +1,72 @@
+import { Map as ImmutableMap, fromJS } from 'immutable';
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import TrendsPanel from '../trends-panel';
+
+describe('', () => {
+ it('renders trending hashtags', () => {
+ const store = {
+ trends: ImmutableMap({
+ items: fromJS([{
+ name: 'hashtag 1',
+ history: [{ accounts: [] }],
+ }]),
+ }),
+ };
+
+ render(, null, store);
+ expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
+ });
+
+ it('renders multiple trends', () => {
+ const store = {
+ trends: ImmutableMap({
+ items: fromJS([
+ {
+ name: 'hashtag 1',
+ history: [{ accounts: [] }],
+ },
+ {
+ name: 'hashtag 2',
+ history: [{ accounts: [] }],
+ },
+ ]),
+ }),
+ };
+
+ render(, null, store);
+ expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
+ });
+
+ it('respects the limit prop', () => {
+ const store = {
+ trends: ImmutableMap({
+ items: fromJS([
+ {
+ name: 'hashtag 1',
+ history: [{ accounts: [] }],
+ },
+ {
+ name: 'hashtag 2',
+ history: [{ accounts: [] }],
+ },
+ ]),
+ }),
+ };
+
+ render(, null, store);
+ expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
+ });
+
+ it('renders empty', () => {
+ const store = {
+ trends: ImmutableMap({
+ items: fromJS([]),
+ }),
+ };
+
+ render(, null, store);
+ expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
+ });
+});